Ausführliche Erläuterung der Funktionen zum Hinzufügen, Ersetzen, Löschen und Kopieren von Knoten mithilfe von jQuery

In diesem Artikel wird hauptsächlich jQuery zum Implementieren der Anhänge-, Ersetzungs-, Lösch- und Kopierfunktionen von Knoten vorgestellt. Er analysiert die Betriebsfähigkeiten von jQuery für DOM-Knoten anhand spezifischer Beispiele, einschließlich append (), prepend (), replaceAll () und replaceWith(). Freunde in Not können sich auf die Tipps zur Verwendung von empty(), remove(), clone(), clone() und anderen Methoden beziehen.

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Funktionen des Anhängens, Ersetzens, Löschens und Kopierens von Knoten implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1 Das Hinzufügen von Knoten ist in das Hinzufügen von Vater-Sohn- und Geschwisterknoten unterteilt. Jede Methode zum Anhängen von Knoten ist in aktives Anhängen und passives Anhängen unterteilt.

//1、父子关系的添加
//主动添加
$(&#39;#shu&#39;).append(&#39;<li>关羽</li>&#39;);//往后添加
$(&#39;#shu&#39;).prepend(&#39;<li>黄忠</li>&#39;);//往前添加
//被动添加
$(&#39;<li>黄盖</li>&#39;).appendTo($(&#39;#wu&#39;));
$(&#39;<li>陆逊</li>&#39;).prependTo($(&#39;#wu&#39;));
//添加已存节点，发生位置改变
$(&#39;#shu&#39;).prepend($(&#39;#wu li:eq(1)&#39;));
//2、兄弟关系的添加.after .before .insertAfter .insertBefore
//主动
$(&#39;#liu&#39;).after(&#39;<li>赵云</li>&#39;);
$(&#39;#liu&#39;).before(&#39;<li>诸葛亮</li>&#39;);
//被动
$(&#39;<li>黄月英</li>&#39;).insertAfter($(&#39;#liu&#39;));
$(&#39;<li>孙尚香</li>&#39;).insertBefore($(&#39;#liu&#39;));

2. Ersetzen Sie den Knoten .replaceAll .replaceWith

//replaceAll主动替换
$('#wu').replaceAll($('#shu'));
//replaceWith被动替换
$(&#39;#yu&#39;).replaceWith(&#39;<li>黄盖</li>&#39;);

3. Knoten .empty() .remove() löschen

$('#wu').empty(); //清空对应的子节点
$('#fei').remove(); //删除匹配到的节点

4. Knoten .clone(true) .clone kopieren (false)

Wenn der Parameter wahr ist, werden der Knoten und seine Ereignisse kopiert

Wenn der Parameter falsch ist, wird nur der Knoten selbst (einschließlich interner Informationen) kopiert

$('#fei').clone(false); //只复制节点本身
$('#fei').clone(true); //复制节点和事件

Verwandte Empfehlungen:

Eine kurze Diskussion über Event-Bubbling, Event-Delegation und jQuery-Elementknotenoperationen

zTree asynchron Laden und Erweitern der Knotenmethode der ersten Ebene Implementieren

Beispiele zum Teilen von JQuery-Selektor- und DOM-Knotenoperationsübungen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Funktionen zum Hinzufügen, Ersetzen, Löschen und Kopieren von Knoten mithilfe von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!