Detaillierte Erläuterung der jQuery-Methode zum Hinzufügen und Löschen von DOM-Elementen_jquery

In diesem Artikel wird die jQuery-Methode zum Hinzufügen und Entfernen von DOM-Elementen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Einführung

DOM ist die Abkürzung für Document Object Modeule. Im Allgemeinen werden DOM-Operationen in drei Aspekte unterteilt.

1. DOM-Kern

DOM Core ist nicht ausschließlich auf Javascript beschränkt. Es kann weit über die reine Verwendung von Webseiten hinaus verwendet werden. Es kann auch für die Verarbeitung aller mit Markup-Sprache geschriebenen Dokumente verwendet werden.
Beispiel: document,getElementsByTagName("form"); //Verwenden Sie DOM Core, um das Formularobjekt abzurufen.

2. HTML-DOM

Bei der Verwendung von Javascript und DOM zum Schreiben von Skripten für HTML-Dateien gibt es viele Attribute, die zu HTML-DOM gehören, noch früher als DOM Core. Es bietet einige prägnantere Notationen zur Beschreibung verschiedener HTML-Elementeigenschaften.
Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

document.forms //HTML-DOM stellt ein Formularobjekt bereit .

PS: Es ist ersichtlich, dass das Abrufen von Objekten und Attributen mithilfe von DOM Core oder HTML-DOM implementiert werden kann.

3. CSS-DOM

CSS-DOM ist eine Operation für CSS. In JavaScript besteht die Hauptfunktion von CSS-DOM darin, verschiedene Attribute des Stilobjekts abzurufen und festzulegen, damit die Webseite verschiedene Effekte darstellen kann.

Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

element.style.color="red" ;//Settings Methode zum Festlegen der Schriftfarbe eines Elements.

Gemeinsame Methoden

1. Elementknoten finden

Code kopieren Der Code lautet wie folgt:

var $li = $("ul li:eq(0)" );/ /Holen Sie sich das erste li unter dem ul-Tag, das auch als $("#ulID li:eq(0)");

geschrieben werden kann 2. Elementattribute finden

Verwenden Sie die attr()-Methode von jquery, um die Werte verschiedener Attribute des Elements zu erhalten. Der Parameter der attr()-Methode kann eins oder zwei sein.

Wenn der Parameter eins ist, ist es der Name des abzufragenden Attributs.

Wenn zwei Parameter vorhanden sind, können Sie den Wert des Attributs festlegen.

alert($("#id").attr("title")); //输出元素的title属性.一个参数
$("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数

3. Elementknoten hinzufügen

$(html) Um es kurz zu erklären: Die Methode $(html) erstellt ein Dom-Objekt basierend auf der eingehenden HTML-Tag-Zeichenfolge, packt das Dom-Objekt in ein JQuery-Objekt und gibt es zurück Gehen Sie einfach zur $()-Fabrik!

Beispiel:

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul");  //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

Nachfolgend sind einige Methoden zum Einfügen von Knoten aufgeführt

HTMLHTML

Methode	Beschreibung	Beispiel
Append()	Inhalt an jedes passende Element anhängen	HTMLCode JQueryCode $(“ul”).append(“ AA “); Ergebnisse AA
appendTo()	Diese Methode ist das Gegenteil von Append()a.Append(b) soll <🎜 ersetzen >b wird an a angehängt, und appendTo() dient zum Anhängen von b verfolgt a in	Code JQuery Code $ („ AA “).appendTo („ul“).; Keputusan AA
Prepend()	Tampilkan kandungan di dalam setiap elemen padanan	HTMLKod Haha JQueryKod $(“p”).prepend(“ABC”); Keputusan ABCHaha
prependTo()	Kaedah ini bertentangan dengan Prepend() a >b ditambah kepada a dan prependTo () ialah untuk prepend b ditambah kepada a dalam	Kod Haha JQuery Kod $(“ABC”).prependTo.(“p”); Keputusan ABC Haha
Selepas()	memasukkan kandungan selepas setiap elemen dipadankan, selepas	HTMLKod AAA JQueryKod $(“p”).Selepas(“cc”); Keputusan AAA cc
insertAfter()	adalah bertentangan dengan Selepas()	HTMLKod AAA JQueryKod $ (“cc”).Selepas(“p”); Keputusan AAA cc
Sebelum()	Sisipkan kandungan sebelum setiap elemen yang sepadan	HTMLKod AAA JQueryKod $(“p”). Sebelumnya (“cc”); Keputusan cc AAA
masukkanSebelum()	adalah bertentangan dengan Sebelum()	HTMLKod AAA JQueryKod $ (“cc” sisipkanSebelumnya (“p”); Keputusan cc AAA

好了，不要斋看，自己动手试试吧:)

4.删除元素节点

由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();

4.1 remove()方法

$("p").remove();// 我们可以获取到要删除的元素，然后调用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

4.2 empty()方法

严格来讲，empty()方法并不是删除元素，而是清空

例：

HTML代码：

<ul>
<li title="AAA">AAA</li>
</ul>

JQuery代码：

复制代码 代码如下:

$("ul li:eq(0)").empty();

结果

<ul>
<li title="AAA"></li>
</ul>

记住，只会清空内容，不会请空属性;

更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》

希望本文所述对大家jQuery程序设计有所帮助。