我怎样才能使我的股利与createElement

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

您需要将该新元素附加到特定的父元素，在您的情况下应附加到my-video 。

函数appendChild将新元素追加到父元素。

 function makeOscarPlayer(parent) { var div = document.createElement("div"); div.innerHTML = 'Hello from Ele'; parent.appendChild(div); } makeOscarPlayer(document.getElementById("my-video"))

 #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; }

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

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如何工作的更多信息，请参见此堆栈溢出问题。

Answer 3

这是一个好的开始，但是您错误地调用了该函数，并且该函数未向页面添加任何内容。

我们使用appendChild将一个节点添加到页面。

在您的函数中，您创建文本并将其添加到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

问题描述

3 个解决方案

解决方案1
1 2018-03-21 19:25:41

解决方案2
1 已采纳 2018-03-21 19:53:45

解决方案3
0 2018-03-21 19:27:27

我怎样才能使我的股利与createElement

问题描述

3 个解决方案

解决方案1 1 2018-03-21 19:25:41

解决方案2 1 已采纳 2018-03-21 19:53:45

解决方案3 0 2018-03-21 19:27:27

解决方案1
1 2018-03-21 19:25:41

解决方案2
1 已采纳 2018-03-21 19:53:45

解决方案3
0 2018-03-21 19:27:27