JS中appendChild与append区别，需要具体代码示例
在JavaScript中，当我们需要动态地向DOM（文档对象模型）中添加子元素时，我们通常使用appendChild和append这两个方法。虽然它们的目的都是为了向父元素中添加子元素，但在使用上却有一些区别。
一、appendChild方法
appendChild方法是DOM节点对象的方法之一，用于向指定的父节点中添加一个子节点。其基本语法如下：
parentNode.appendChild(childNode);
其中，parentNode是要添加子节点的父节点，childNode是要添加的子节点。
下面是一个具体的代码示例，假设我们有一个父元素div和一个子元素p：
<div id="parent"></div> <p id="child">This is a child paragraph.</p>
我们可以使用appendChild方法将子元素p添加到父元素div中：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);在上面的示例中，child节点被添加到了parent节点中。此时，div的HTML结构将变成：
<div id="parent"> <p id="child">This is a child paragraph.</p> </div>
二、append方法
append方法是通过使用querySelector或querySelectorAll选择器，将指定的HTML元素追加到一个父元素中。其基本语法如下：
parentElement.append(element[, ...elementN]);
其中，parentElement是要追加到的父元素，element是要追加的HTML元素。
下面是一个具体的代码示例，假设我们有一个父元素div和一个子元素p：
<div id="parent"></div> <p id="child">This is a child paragraph.</p>
我们可以使用append方法将子元素p添加到父元素div中：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);在上面的示例中，child元素被添加到了parent元素中。此时，div的HTML结构将变成：
<div id="parent"> <p id="child">This is a child paragraph.</p> </div>
三、appendChild与append的区别
-
参数类型：
- appendChild只接受一个参数，即要添加的子节点；
- append方法可以接受多个参数，可以一次性添加多个子元素。
-
返回值：
- appendChild方法返回新添加的子节点；
- append方法没有返回值。
-
字符串自动转换为文本节点：
- append方法允许将字符串或HTML代码作为参数传递，它会将其自动转换为文本节点并追加到父元素中；
- appendChild方法只接受节点对象作为参数，无法直接将字符串添加到父元素中。
下面是一个具体的代码示例，比较了appendChild和append方法的一些区别：
var parent = document.getElementById("parent");
// 使用appendChild方法添加子节点
var child1 = document.createElement("p");
var text1 = document.createTextNode("This is child 1.");
child1.appendChild(text1);
parent.appendChild(child1);
// 使用append方法添加子元素和字符串
var child2 = document.createElement("p");
var text2 = document.createTextNode("This is child 2.");
child2.appendChild(text2);
var child3 = document.createElement("p");
child3.append("This is child ", 3);
parent.append(child2, child3, "This is child 4.");通过上述代码，我们可以看到append方法不仅可以直接追加HTML元素，而且可以直接将字符串转换为文本节点并添加到父元素中。
综上所述，appendChild和append方法在向父元素中添加子元素时有一些区别。在使用的过程中，我们可以灵活选择哪种方法更适合实现我们的目的。
