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

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

(modals部分请放上自己的元素)

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

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

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

Answer 3

你的代码有两个错误首先是您使用了错误的 "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 4

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

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

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

How to create an element dynamically in an html page using javascript?

html

javascript

element

creation

dynamic