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方法在向父元素中添加子元素時有一些區別。在使用的過程中，我們可以靈活選擇哪種方法更適合實現我們的目的。