JQuerys Methode zum Erstellen von DOM-Knoten_jquery

Das Beispiel in diesem Artikel beschreibt, wie JQuery DOM-Knoten erstellt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Verwenden Sie den JQuery-Selektor, um schnell und einfach einen bestimmten Elementknoten im Dokument zu finden, und verwenden Sie dann die Methode attr(), um die Werte verschiedener Attribute des Elements abzurufen. Aber echte DOM-Manipulation ist nicht so einfach. Bei DOM-Vorgängen ist es häufig erforderlich, HTML-Inhalte dynamisch zu erstellen, um die Darstellung von Dokumenten im Browser zu ändern und verschiedene Zwecke der Mensch-Computer-Interaktion zu erreichen.

HTML-DOM-Struktur ist wie folgt:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
    <li title='PHP编程'>简单易懂的PHP编程</li>
    <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
    <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

Elementknoten erstellen

Sie möchten beispielsweise zwei 25edfb22a4f469ecb59f1190150159c6-Elementknoten erstellen und sie als untergeordnete Knoten des ff6d136ddc5fdfeffaf53ff6ee95f185-Elementknotens hinzufügen. Für den Abschluss dieser Aufgabe sind zwei Schritte erforderlich.

1. Erstellen Sie zwei 25edfb22a4f469ecb59f1190150159c6
2. Fügen Sie die beiden neuen Elemente in das Dokument ein.

Der erste Schritt kann mit der Factory-Funktion $() von jQuery im folgenden Format abgeschlossen werden:

$(html);

Die

$(html)-Methode erstellt ein DOM-Objekt basierend auf der eingehenden HTML-Markup-Zeichenfolge, umschließt das DOM-Objekt in ein jQuery-Objekt und gibt es zurück.

Erstellen Sie zunächst zwei 25edfb22a4f469ecb59f1190150159c6-Elemente. Der jQuery-Code lautet wie folgt:

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

Fügen Sie dann diese beiden neuen Elemente in das Dokument ein. Sie können Methoden wie append() in jQuery verwenden. Der JQuery-Code lautet wie folgt:

var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Dynamisch erstellte neue Elementknoten werden nicht automatisch zum Dokument hinzugefügt, sondern müssen mit anderen Methoden in das Dokument eingefügt werden. Achten Sie beim Erstellen einzelner Elemente darauf, Tags zu schließen und Standard-XHTML-Formatierungen zu verwenden. Um beispielsweise ein e388a4556c0f65e1904146cc1a846bee-Element zu erstellen, können Sie $("a6f776b766579c28d02706af09482172") oder $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3") verwenden, verwenden Sie jedoch nicht $("< ;p>") Oder Großbuchstaben $("4ba45e75bc6a82723461547597599043").

Textknoten erstellen

Zwei 25edfb22a4f469ecb59f1190150159c6-Elementknoten wurden erstellt und in das Dokument eingefügt. Zu diesem Zeitpunkt müssen Sie dem erstellten Elementknoten Textinhalt hinzufügen.

Der JQuery-Code lautet wie folgt:

var $li_1 = $("
新增节点：数据结构
"); // 创建第一个
元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个
元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Wie im obigen Code gezeigt, besteht das Erstellen von Textknoten darin, den Textinhalt direkt beim Erstellen von Elementknoten zu schreiben und ihn dann mit append() und anderen Methoden zum Dokument hinzuzufügen.

Egal wie komplex der HTML-Code in $(html) ist, er muss auf die gleiche Weise erstellt werden. Zum Beispiel $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644bDies istd1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32komplexe Kombination5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea" );

Attributknoten erstellen

Das Erstellen von Attributknoten ähnelt dem Erstellen von Textknoten und wird auch direkt beim Erstellen von Elementknoten erstellt. Der JQuery-Code lautet wie folgt:

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

Wenn Sie den Code über das Browser-Quellcode-Tool anzeigen, können Sie sehen, dass die letzten beiden 25edfb22a4f469ecb59f1190150159c6-Elemente einen Attributknoten mit dem Namen „title“ haben. Daraus lässt sich schließen, dass die Textknoten und Attributknoten des erstellten Elements der Webseite hinzugefügt wurden. Es ist ersichtlich, dass die Verwendung von jQuery zum dynamischen Erstellen von HTML-Elementen sehr einfach, bequem und flexibel ist.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.