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方法的一些区别：

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方法在向父元素中添加子元素时有一些区别。在使用的过程中，我们可以灵活选择哪种方法更适合实现我们的目的。