Question

我正在尝试在HTML

中的现有div下创建另一个div

<html>
    <head>
        <title>    
            Media Player
        </title>
        <script src="script.js"></script>
    </head>
    <script>
            makeOscarPlayer(document.getElementById("my-video"))
    </script>
    <body>
        <div class="my-player">
            Hello! 
        </div>
    </body>
</html>

function makeOscarPlayer(){
   var div = document.createElement("div");
    div.innerHTML = `
    hello
`
}

有人可以向我解释我做错了什么吗？我是一名自学成才的开发人员，如果我的代码组织不完整仍然在学习

Answer 1

您需要将新元素附加到特定父级，在您的情况下添加到function makeOscarPlayer(parent) { var div = document.createElement("div"); div.innerHTML = 'Hello from Ele'; parent.appendChild(div); } makeOscarPlayer(document.getElementById("my-video"))。

函数 appendChild 会将新元素附加到父元素。

＆＃13;

#my-player {
  border: 1px dashed green;
  padding: 5px;
  margin: 5px;
  width: 300px;
  background-color: #f1f1f1
}

#my-video div {
  border: 1px dashed green;
  padding: 5px;
  margin: 5px;
  width: 200px;
  font-weight: 700;
}

＆＃13;

<div id="my-player">
  Hello!
  <div id="my-video">
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

您在创建makeOscarPlayer()功能之前正在调用它。

您需要将makeOscarPlayer()函数声明包装在脚本标记中。

您将document.getElementById("my-video")作为参数传递给makeOscarPlayer()，但没有ID元素为'my-video'的HTML元素。您为函数提供了null的参数，而函数声明没有参数。

您需要告诉脚本将新元素放在何处。为此，您可以抓取现有元素并使用parentNode和insertBefore

以下是我参与的准系统版本：

<html>
  <head>
      <title>    
          Media Player
      </title>
  </head>
  <script>
  </script>
  <body>
      <div id="my-player">
          Hello! 
      </div>
  </body>
</html>

<script type="text/javascript">
  function makeOscarPlayer(){
    var div = document.createElement("div");
    div.innerHTML = `hello`;

    // This grabs the element that you want to create a new element by
    var existingDiv = document.getElementById("my-player");

    // This tells the script where to put the new element
    existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
  }

  // Must be called in the same script block or after the script holding the function declaration is loaded
  makeOscarPlayer();
</script>

有关parentNode和insertBefore工作原理的详细信息，请参阅this Stack Overflow question

Answer 3

这是一个好的开始，但是您正在调用该函数，并且您的函数没有向页面添加任何内容。

我们使用appendChild向页面添加节点。

在你的函数中，你创建了一个div并将文本添加到div中，但是你没有返回你创建的节点（，你也没有用分号关闭你的代码行，所以我也添加了）但这应该有效：

<html>

<head>
  <title>
    Media Player
  </title>
</head>

<body>

  <div class="my-player">
    Hello!
  </div>

  <script>
    function makeOscarPlayer() {
      var div = document.createElement("div");
      div.innerHTML = `hello`;
      return div;
    }
    document.getElementById("my-video").appendChild(makeOscarPlayer())
  </script>
</body>

</html>

    function makeOscarPlayer() {
      var div = document.createElement("div");
      div.innerHTML = `hello`;
      return div;
    }
    document.getElementById("my-video").appendChild(makeOscarPlayer())

<html>

<head>
  <title>
    Media Player
  </title>
</head>

<body>
  <!-- added my-video div -->
  <div id="my-video"></div>

  <div class="my-player">
    Hello!
  </div>

</body>

</html>

如何使用createElement显示div

3 个答案: