JavaScript中append()与appendChild()的区别

SuperIKUN

于 2023-03-29 21:33:03 发布

阅读量348

点赞数 2

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_61729906/article/details/129846026

版权

Element.append()

语法

Element.append((Node or String)... nodes);
(无返回值)

nodes:一组要插入的Node 或 String 对象

Node.appendChild()

语法

element.appendChild(aChild)

aChild:要追加给父节点的节点

`Element.append()`和`Node.appendChild()`的差异：

Element.append()允许追加 String 对象，而 Node.appendChild() 只接受 Node 对象。

  <body>
    <ul id="myList">
      <li>Coffee</li>
      <li>Tea</li>
    </ul>
    <p id="demo">单击按钮将项目添加到列表中</p>
    <button>点我</button>
    <script>
      let btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        let node = document.createElement("li");
        let text = document.createTextNode("Mlike");
        node.appendChild(text);
        //不能写成  node.appendChild('Mlike'); 
        document.getElementById("myList").appendChild(node);
      });
    </script>
  </body>

<body>
    <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">单击按钮将项目添加到列表中</p>
    <button>点我</button>
    <script>
        let btn = document.querySelector("button");
        btn.addEventListener("click", function () {
            let node = document.createElement("li");
            node.append('Mlike');
            document.getElementById("myList").append(node);
        });
    </script>
</body>

2.Element.append() 没有返回值，而 Node.appendChild() 返回追加的 Node 对象。

<body>
    <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">单击按钮将项目添加到列表中</p>
    <button>点我</button>
    <script>
        let btn = document.querySelector("button");
        btn.addEventListener("click", function () {
            let node = document.createElement("li");
            let text = document.createTextNode("Mlike");
            node.appendChild(text);
            console.log(node.appendChild(text))
            //"Mlike"
            document.getElementById("myList").appendChild(node);
            console.log(document.getElementById("myList").appendChild(node))
            //<li>Mlike</li>
        });
    </script>
</body>

3.Element.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

<body>
    <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">单击按钮将项目添加到列表中</p>
    <button>点我</button>
    <script>
        let btn = document.querySelector("button");
        btn.addEventListener("click", function () {
            let node = document.createElement("li");
            node.append('Mlike');
            document.getElementById("myList").append(node, 'Coke');
        });
    </script>
</body>