如何使用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