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

最新推荐文章于 2025-04-03 12:06:16 发布

SuperIKUN

最新推荐文章于 2025-04-03 12:06:16 发布

阅读量607

点赞数 2

文章标签： javascript 前端 java

本文链接：https://blog.youkuaiyun.com/m0_61729906/article/details/129846026

版权

文章详细比较了JavaScript中的Element.append()方法与Node.appendChild()方法的差异，包括append()接受字符串参数，没有返回值以及能一次添加多个节点的特点，而appendChild()仅接受Node对象并返回添加的节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>