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 ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQueryCode $(“ul”).append(“25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb“); Ergebnisse ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
appendTo()	Diese Methode ist das Gegenteil von Append()a.Append(b) soll b wird an a angehängt, und appendTo() dient zum Anhängen von b verfolgt a in	Code ff6d136ddc5fdfeffaf53ff6ee95f185929d1f5ca49e04fdcb27f9465b944689 JQuery Code $ („25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb“).appendTo („ul“).; Keputusan ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6AAbed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
Prepend()	Tampilkan kandungan di dalam setiap elemen padanan	HTMLKod e388a4556c0f65e1904146cc1a846beeHaha94b3e26ee717c64999d7867364b1b4a3 JQueryKod $(“p”).prepend(“a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a”); Keputusan e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747aHaha94b3e26ee717c64999d7867364b1b4a3
prependTo()	Kaedah ini bertentangan dengan Prepend() a >b ditambah kepada a dan prependTo () ialah untuk prepend b ditambah kepada a dalam	Kod e388a4556c0f65e1904146cc1a846bee Haha94b3e26ee717c64999d7867364b1b4a3 JQuery Kod $(“a4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a”).prependTo.(“p”); Keputusan e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419ABC0d36329ec37a2cc24d42c7229b69747a Haha94b3e26ee717c64999d7867364b1b4a3
Selepas()	memasukkan kandungan selepas setiap elemen dipadankan, selepas	HTMLKod e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryKod $(“p”).Selepas(“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”); Keputusan e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
insertAfter()	adalah bertentangan dengan Selepas()	HTMLKod e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryKod $ (“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”).Selepas(“p”); Keputusan e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a
Sebelum()	Sisipkan kandungan sebelum setiap elemen yang sepadan	HTMLKod e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryKod $(“p”). Sebelumnya (“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a”); Keputusan a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3
masukkanSebelum()	adalah bertentangan dengan Sebelum()	HTMLKod e388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3 JQueryKod $ (“a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747a” sisipkanSebelumnya (“p”); Keputusan a4b561c25d9afb9ac8dc4d70affff419cc0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeAAA94b3e26ee717c64999d7867364b1b4a3

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

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程序设计有所帮助。