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

【问题标题】：How to create an element dynamically in an html page using javascript?如何使用javascript在html页面中动态创建元素？
【发布时间】：2019-06-08 15:53:02
【问题描述】：

我正在学习使用 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>

【问题讨论】：

Dynamically creating HTML elements using Javascript?的可能重复

标签： javascript html dynamic element creation

【解决方案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>

【讨论】：

我使用了正确的 id，但在“innerText”部分搞砸了。不过感谢您的回答。我现在明白我的错误了:)

【解决方案2】：

<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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这直接不是你的答案，但算法非常相似

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

（模态部分请自行添加元素）

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

也很抱歉，但问题与 - Dynamically creating HTML elements using Javascript?

【讨论】：