Warum jQuery "append()" eines Kindes entfernt es zuerst?

Question

Betrachten Sie das folgende HTML:

<div> 
    <p>Hello</p> 
    World 
</div> 

Warum $("div").append($("p")); zuerst die <p> von seinem ursprünglichen Ort entfernt?

Hinweis: Ich möchte keine zweite Kopie von <p> erstellen. Ich möchte nur verstehen, warum jQuery die <p> vor dem Anhängen entfernt.

Answer 1

jQuery ist nur eine Abstraktion des DOM und that's what the DOM appendChild method does.

Fügt den Knoten newChild an das Ende der Liste der untergeordneten Elemente dieses Knotens an. Wenn die newChild bereits in der Struktur ist, wird sie zuerst entfernt.

In gewisser Weise macht es Sinn; Ein Knoten hat Eltern, Kinder und einige andere Dinge. Wenn ein Knoten an mehreren verschiedenen Orten sein könnte, müsste er mehrere Eltern und dergleichen haben. Das würde der API eine Menge unnötiger Komplexität hinzufügen.

Answer 2

Weil Sie alle Absatz-Tags auswählen und sie anhängen an die div. Sie erstellen keine neuen Absatztags.

Answer 3

Ein DOM-Knoten kann sich immer nur an einer Stelle befinden. Wenn Sie also append aufrufen, um einen vorhandenen DOM-Knoten einzufügen, der bereits in das DOM eingefügt wurde, bevor er an eine neue Stelle gesetzt werden kann, muss er an der Stelle entfernt werden, an der er sich befindet.

Die einzige andere Alternative wäre, einen Fehler zurückzugeben und zu verweigern, einen Knoten anzufügen, der bereits im Dokument vorhanden ist. Aber die Designer entschieden, dass wenn Sie append() aufrufen, Sie wollen, dass es da ist. Wenn es also woanders ist, dann entfernen Sie es zuerst von dort und fügen Sie es dort ein, wo Sie es angefügt haben.

Beachten Sie, dass append() Modelle jQuery selbst nach der DOM Methode appendChild(), die dieses documentation note on MDN hat:

Wenn das Kind ein Hinweis auf einen bestehenden Knoten im Dokument ist, appendChild es auf den neuen von seiner aktuellen Position bewegt Position (dh es ist nicht erforderlich, den Knoten von seinem Elternknoten zu entfernen, bevor er an einen anderen Knoten angehängt wird).

Dies bedeutet auch, dass ein Knoten nicht gleichzeitig in zwei Punkten des Dokuments sein kann. Wenn der Knoten also bereits ein Elternteil hat, wird zuerst entfernt und dann an der neuen Position angehängt.

Answer 4

Sie wählen ein P-Tag aus, das sich bereits im DOM befindet, und hängen es dann an anderer Stelle im DOM an. Was würden Sie erwarten? Wirklich die einzigen Optionen sind 1) was Sie sehen, 2) das ausgewählte Tag vor dem Anhängen duplizieren, oder 3) einen Fehler werfen, weil es bereits im DOM ist.