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