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

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

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

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

还很遗憾地说，但问题是重复的- 使用Javascript动态创建HTML元素？

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

解决方案1
1 已采纳 2019-06-08 16:06:58

解决方案2
0 2019-06-08 15:59:35

解决方案3
0 2019-06-08 16:06:31

解决方案4
0 2019-06-08 16:07:16

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2019-06-08 16:06:58

解决方案2 0 2019-06-08 15:59:35

解决方案3 0 2019-06-08 16:06:31

解决方案4 0 2019-06-08 16:07:16

解决方案1
1 已采纳 2019-06-08 16:06:58

解决方案2
0 2019-06-08 15:59:35

解决方案3
0 2019-06-08 16:06:31

解决方案4
0 2019-06-08 16:07:16