Question

我正在学习使用javascript在html页面中动态创建元素。在这段代码中，我试图在“ div-1”内部创建一个简单的“ h6”。

<!DOCTYPE html>
    <header>
        <meta charset="utf-8">
    </header>
    <body>
        <button onclick="constructElement()">click</button>
        <div id="div-1"></div>

        <script>
            function constructElement(){
                var elem = document.createElement("h6");
                elem.innerText("Dynamically added text.")
                document.getElementById("div-1").appendChild(elem);
            }
        </script>
    </body>
</html>

Answer 1

您的代码中有两个错误第一个是您使用了错误的“ id”名称div-1而不是div1 而且，innerText不是函数

这是修复后的代码:)

<header>
  <meta charset="utf-8">
</header>

<body>

  <button onclick="constructElement()">click</button>

  <div id="div-1">

  </div>

  <script>
    function constructElement() {
      var elem = document.createElement("h6");
      elem.innerText = "Dynamically added text."
      document.getElementById("div-1").appendChild(elem);
    }
  </script>
</body>

Answer 2

这不是您的答案，但是算法非常相似

https://stackoverflow.com/a/56489422/10941112

（对于模态部分，请输入您自己的元素）

如果您需要进一步澄清，请随时提出，因为这不是您的直接答案

也很遗憾地说，但问题是- Dynamically creating HTML elements using Javascript?

Answer 3

<header>
    <meta charset="utf-8">
</header>

<body>

    <button onclick="constructElement()">click</button>

    <div id="div-1">

    </div>

    <script>

            function constructElement(){
                var elem = document.createElement("h6");
                elem.innerText= "Dynamically added text.";
                document.getElementById("div-1").appendChild(elem);
            }
    </script>
</body>

Answer 4

设置节点的文本内容：node.innerText = text

function constructElement(){
    var elem = document.createElement("h6");
    elem.innerText ="Dynamically added text."
    document.getElementById("div-1").appendChild(elem);
}

如何使用javascript在html页面中动态创建元素？

4 个答案: