Der Unterschied zwischen appendChild und append in JS

Der Unterschied zwischen appendChild und append in JS erfordert spezifische Codebeispiele

Wenn wir in JavaScript untergeordnete Elemente dynamisch zum DOM (Document Object Model) hinzufügen müssen, verwenden wir normalerweise die Methoden appendChild und append. Obwohl ihr Zweck darin besteht, untergeordnete Elemente zu übergeordneten Elementen hinzuzufügen, gibt es einige Unterschiede in ihrer Verwendung.

1. appendChild-Methode
Die appendChild-Methode ist eine der Methoden des DOM-Knotenobjekts, die zum Hinzufügen eines untergeordneten Knotens zum angegebenen übergeordneten Knoten verwendet wird. Die grundlegende Syntax lautet wie folgt:

parentNode.appendChild(childNode);

Unter diesen ist parentNode der übergeordnete Knoten zum Hinzufügen des untergeordneten Knotens und childNode der hinzuzufügende untergeordnete Knoten.

Hier ist ein konkretes Codebeispiel, vorausgesetzt, wir haben ein übergeordnetes Element div und ein untergeordnetes Element p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

Wir können die appendChild-Methode verwenden, um das untergeordnete Element p zum übergeordneten Element div hinzuzufügen:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);

Im obigen Beispiel , der untergeordnete Knoten wird zum übergeordneten Knoten hinzugefügt. Zu diesem Zeitpunkt sieht die HTML-Struktur des Div wie folgt aus:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

2. Append-Methode
Die Append-Methode hängt das angegebene HTML-Element an ein übergeordnetes Element an, indem sie den Selektor querySelector oder querySelectorAll verwendet. Die grundlegende Syntax lautet wie folgt:

parentElement.append(element[, ...elementN]);

Unter diesen ist parentElement das übergeordnete Element, an das angehängt werden soll, und element ist das anzuhängende HTML-Element.

Hier ist ein konkretes Codebeispiel, vorausgesetzt, wir haben ein übergeordnetes Element div und ein untergeordnetes Element p:

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

Wir können die append-Methode verwenden, um das untergeordnete Element p zum übergeordneten Element div hinzuzufügen:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);

Im obigen Beispiel , wird das untergeordnete Element zum übergeordneten Element hinzugefügt. Zu diesem Zeitpunkt lautet die HTML-Struktur des Div:

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

3. Der Unterschied zwischen appendChild und append

1. Parametertyp:

   • appendChild akzeptiert nur einen Parameter, nämlich den hinzuzufügenden untergeordneten Knoten
   • append-Methode kann mehrere Parameter akzeptieren und mehrere Unterelemente gleichzeitig hinzufügen.

2. Rückgabewert:

   • appendChild-Methode gibt den neu hinzugefügten untergeordneten Knoten zurück;
   • append-Methode hat keinen Rückgabewert.

3. Strings werden automatisch in Textknoten konvertiert:

   • append-Methode ermöglicht die Übergabe von Strings oder HTML-Codes als Parameter und wandelt diese automatisch in Textknoten um und hängt sie an das übergeordnete Element an;
   • appendChild-Methode akzeptiert nur Knoten Objekte als Parameter verwenden, können Zeichenfolgen nicht direkt zum übergeordneten Element hinzugefügt werden.

Das Folgende ist ein spezifisches Codebeispiel, das einige Unterschiede zwischen den Methoden appendChild und append vergleicht:

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.");

Durch den obigen Code können wir sehen, dass die Methode append nicht nur HTML-Elemente direkt anhängen, sondern auch direkt konvertieren kann Zeichenfolgen als Textknoten und zum übergeordneten Element hinzugefügt.

Zusammenfassend lässt sich sagen, dass es beim Hinzufügen von untergeordneten Elementen zu übergeordneten Elementen einige Unterschiede zwischen den Methoden appendChild und append gibt. Im Nutzungsprozess können wir flexibel wählen, welche Methode zur Erreichung unserer Zwecke besser geeignet ist.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen appendChild und append in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!