JQuerys Methode zum Erstellen von DOM-Knoten

JQuerys Methode zum Erstellen von DOM-Knoten_jquery

WBOY

Freigeben： 2016-05-16 15:56:02

Original

1726 Leute haben es durchsucht

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>

Nach dem Login kopieren

Elementknoten erstellen

Sie möchten beispielsweise zwei

-Elementknoten erstellen und sie als untergeordnete Knoten des

1. Erstellen Sie zwei

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
-Elemente. Der jQuery-Code lautet wie folgt:
```
var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素
```
Nach dem Login kopieren
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);
```
Nach dem Login kopieren
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
-Element zu erstellen, können Sie $("
") oder $("
") verwenden, verwenden Sie jedoch nicht $("< ;p>") Oder Großbuchstaben $("
").

Textknoten erstellen

Zwei
-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);
```
Nach dem Login kopieren
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 $("

Dies istakomplexe Kombination" );

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);

Nach dem Login kopieren

Wenn Sie den Code über das Browser-Quellcode-Tool anzeigen, können Sie sehen, dass die letzten beiden

-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.