如何用createElement创建并显示div？求助在现有div下方新增div的方法

让我来帮你梳理问题并解决这个需求，你的代码里有几个关键问题导致没法实现想要的效果，我们一步步来修正：

首先，说说你的代码存在的问题 #

• DOM加载顺序错误：你在<head>里引入了脚本，还在<body>标签前调用了makeOscarPlayer，这时候浏览器还没解析到<body>里的.my-player元素，不仅找不到目标元素，也没法在它下方插入内容。
• 函数参数不匹配：调用makeOscarPlayer时传了document.getElementById("my-video")，但函数定义没有接收参数，导致这个参数完全被忽略。
• 创建的元素未挂载到DOM：你用createElement创建了div，但只是存在于内存中，没有把它添加到页面的DOM树里，所以不会显示在页面上。

步骤1：修正HTML的脚本执行时机 #

要确保JavaScript代码在DOM元素都加载完成后再执行，最简单的方式是把脚本放到<body>标签的末尾，这样浏览器会先解析完所有DOM元素，再执行脚本：

<html>
<head>
  <title> Media Player </title>
</head>
<body>
  <div class="my-player"> Hello! </div>
  <!-- 把脚本移到body末尾，确保DOM已加载 -->
  <script src="script.js"></script>
  <script>
    makeOscarPlayer();
  </script>
</body>
</html>

步骤2：修改JavaScript函数，实现需求 #

我们需要让函数完成两个核心操作：创建新的div元素，然后把它插入到.my-player元素的下方。这里可以用document.querySelector找到目标元素，再用after()方法直接在它后面插入新元素（这是最直观的方式）。

修正后的script.js代码：

function makeOscarPlayer() {
  // 1. 创建新div并设置内容
  const newDiv = document.createElement("div");
  newDiv.innerHTML = `Hello from the created div!`;
  // 可选：给新div加个类，方便后续样式控制
  newDiv.classList.add("added-player");

  // 2. 找到页面上的.my-player元素
  const targetPlayer = document.querySelector(".my-player");
  
  // 3. 在.my-player的下方插入新div
  targetPlayer.after(newDiv);
}

额外补充：如果需要处理视频元素参数 #

如果你原本想传入视频元素（比如调用时的my-video），可以修改函数来接收并使用这个参数，同时确保页面上存在这个视频元素：

function makeOscarPlayer(videoElement) {
  // 这里可以处理传入的视频元素，比如设置属性、绑定事件等
  if (videoElement) {
    console.log("传入的视频元素：", videoElement);
    // 示例：给视频元素加个类
    videoElement.classList.add("oscar-player");
  }

  // 继续执行创建和插入div的逻辑
  const newDiv = document.createElement("div");
  newDiv.innerHTML = `Hello from the created div!`;
  const targetPlayer = document.querySelector(".my-player");
  targetPlayer.after(newDiv);
}

对应的HTML要确保my-video元素存在：

<body>
  <div class="my-player"> Hello! </div>
  <video id="my-video" src="your-video-source.mp4"></video>
  <script src="script.js"></script>
  <script>
    // 现在可以正确获取到my-video元素并传入
    makeOscarPlayer(document.getElementById("my-video"));
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user9324214