Question

如何使用 createElement 使我的 div 出现

2018-03-21

42

javascript

我试图在 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

您在创建 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 如何工作的更多信息，请参阅此 Stack Overflow 问题

Answer 2

您需要将新元素附加到特定的父元素，在您的情况下为 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 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>