jquery fügt Elemente dynamisch hinzu und löscht sie

Mit der kontinuierlichen Weiterentwicklung der Webtechnologie ist das dynamische Hinzufügen und Löschen von DOM-Elementen zu einer der am häufigsten verwendeten Technologien in der Front-End-Entwicklung geworden, insbesondere in jQuery. Durch Schlüsselfunktionen und -methoden können wir DOM-Elemente sehr bequem implementieren. Hinzufügung oder Löschung. In diesem Artikel werden die relevanten Kenntnisse und Fähigkeiten zum dynamischen Hinzufügen und Entfernen von DOM-Elementen in jQuery vorgestellt.

1. DOM-Elemente dynamisch hinzufügen

1.1. Elemente erstellen

In jQuery können Sie die Funktion $() oder ihren Alias ​​jQuery( ) Funktion erstellt ein neues Elementobjekt. Zum Beispiel:

<code>var $newElement = $("<div></div>");</code>

Diese Codezeile erstellt ein neues div-Element und weist das Element der Variablen $newElement zu. In jQuery weist ein Variablenname, der mit $ beginnt, normalerweise darauf hin, dass es sich bei der Variablen um ein jQuery-Objekt handelt.

1.2. Elementattribute festlegen und abrufen

Sie können die attr()-Methode verwenden, um die Attribute von Elementen festzulegen und abzurufen. Zum Beispiel:

<code>//设置id属性为"test"
$newElement.attr("id", "test");

//获取id属性
var idValue = $newElement.attr("id");</code>

1.3. Zum übergeordneten Element hinzufügen

Sie können die appendTo()-Methode verwenden, um neue Elemente zu einem übergeordneten Element hinzuzufügen. Zum Beispiel:

<code>//将$newElement添加到id为"parent"的元素中
$newElement.appendTo("#parent");</code>

1.4, an der angegebenen Position einfügen

Sie können die Methode insertAfter() oder before() verwenden, um das Element an der angegebenen Position einzufügen. Zum Beispiel:

<code>//将$newElement插入到id为"old"的元素后面
$newElement.insertAfter("#old");

//将$newElement插入到id为"old"的元素前面
$newElement.before("#old");</code>

2. DOM-Elemente dynamisch löschen

2.1. Aus dem übergeordneten Element löschen

Sie können die Methode „remove()“ verwenden, um Entfernen Sie das Element vom übergeordneten Element. Das Element wird gelöscht. Zum Beispiel:

<code>//删除id为"test"的元素
$("#test").remove();</code>

2.2. Alle untergeordneten Elemente löschen

Sie können die Methode empty() verwenden, um alle untergeordneten Elemente des Elements zu löschen. Zum Beispiel:

<code>//删除id为"parent"元素中的所有子元素
$("#parent").empty();</code>

3. Zusammenfassung

Anhand der obigen Einführung können wir sehen, dass die Methode zum dynamischen Hinzufügen und Entfernen von DOM-Elementen in jQuery sehr flexibel und praktisch ist ist weit verbreitet. Für Entwicklungsszenarien, die eine häufige Manipulation von DOM-Elementen erfordern, sind diese technischen Punkte zweifellos sehr hilfreich.

Das obige ist der detaillierte Inhalt vonjquery fügt Elemente dynamisch hinzu und löscht sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!