Zusammenfassung der DOM-Knotenbetriebsmethoden in jQuery

In diesem Artikel wird hauptsächlich die vollständige Methode zum Betreiben von DOM-Knoten in jQuery vorgestellt. Interessierte Freunde sollten einen Blick darauf werfen. Ich hoffe, dass er jedem helfen kann, besser zu lernen, wie man DOM-Knoten in jQuery bedient.

append(content | fn): Inhalt an jedes passende Element anhängen.

Zum Beispiel: Hängen Sie einige HTML-Tags an alle Absätze an.

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(): ​​​​Diese Methode kehrt die herkömmliche Operation $(A).append(B) um, das heißt, sie hängt nicht B an A, sondern A an B an

Zum Beispiel: Hängen Sie alle Absätze an das Element mit dem ID-Wert foo an.

<p>I would like to say: </p>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

prepend(): Inhalt in jedem passenden Element voranstellen

Beispiel: Stellen Sie allen Absätzen HTML-Markup-Code voran.

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content):

Alle passenden Elemente einem anderen, angegebenen Satz von Elementen voranstellen. Tatsächlich kehrt die Verwendung dieser Methode die herkömmliche $(A).prepend(B)-Operation um, d. h. statt B vor A zu stellen, wird A vor B vorangestellt.

Zum Beispiel: Hängen Sie alle Absätze an das Element mit dem ID-Wert foo an.

<p>I would like to say: </p><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

after(): Inhalt nach jedem passenden Element einfügen. Das eingefügte Element und das eingefügte Element gehören zur gleichen Ebene, nicht zur Eltern-Kind-Beziehung

Beispiel: Fügen Sie nach allen Absätzen einen HTML-Markup-Code ein.

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

before(): Inhalt vor jedem passenden Element einfügen.

Zum Beispiel: Fügen Sie vor allen Absätzen einen HTML-Markup-Code ein.

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter(): Fügt alle übereinstimmenden Elemente nach einem anderen, angegebenen Satz von Elementen ein. Tatsächlich kehrt die Verwendung dieser Methode die herkömmliche Operation $(A).after(B) um, d Element. Gleich wie $("#foo").after("p")

insertBefore(): Fügt alle passenden Elemente vor einem anderen, angegebenen Elementsatz ein. Tatsächlich kehrt die Verwendung dieser Methode die herkömmliche Operation $(A).before(B) um, d. h. statt B vor A einzufügen, wird A vor B eingefügt.

<p>I would like to say: </p><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

Zum Beispiel: Fügen Sie alle Absätze vor einem Element ein. Identisch mit $("#foo").before("p").

wrap(): Umschließt alle passenden Elemente mit dem strukturierten Markup anderer Elemente.

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

Diese Umhüllung ist am nützlichsten, um zusätzliches strukturiertes Markup in das Dokument einzufügen, ohne die semantische Qualität des Originaldokuments zu zerstören. Das Prinzip dieser Funktion besteht darin, das erste bereitgestellte Element zu untersuchen (das dynamisch aus dem bereitgestellten HTML-Markup-Code generiert wird) und das Vorgängerelement der obersten Ebene in seiner Codestruktur zu finden – dieses Vorgängerelement ist das Wrapping-Element. Diese Funktion kann nicht verwendet werden, wenn das Element im HTML-Markup-Code Text enthält. Wenn Sie also Text hinzufügen möchten, sollten Sie ihn erst nach Fertigstellung des Pakets hinzufügen.

Zum Beispiel: DOM-Element, das zum Umschließen des Zielelements verwendet wird

unwrap(): Diese Methode entfernt das übergeordnete Element des Elements. Dadurch kann die Wirkung der Methode .wrap() schnell zunichte gemacht werden. Übereinstimmende Elemente (und ihre Geschwister) ersetzen ihre übergeordneten Elemente in der DOM-Struktur.

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

Zum Beispiel: Umschließen Sie jeden Absatz mit p mit der ID „Inhalt“

wrapAll(): Umschließen Sie alle übereinstimmenden Elemente mit einem einzelnen Element

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

Das ist anders als '.wrap()' wird für jedes passende Element einmal umbrochen . Diese Art der Umhüllung ist am nützlichsten, um zusätzliches strukturiertes Markup in ein Dokument einzufügen, ohne die semantische Qualität des Originaldokuments zu zerstören. Das Prinzip dieser Funktion besteht darin, das erste bereitgestellte Element zu untersuchen und das oberste Vorfahrenelement in seiner Codestruktur zu finden – dieses Vorfahrenelement ist das umschließende Element.

Zum Beispiel: Umschließen Sie alle Absätze mit einem generierten p

oder

$("p").wrapAll("<p></p>");

Verwandte Empfehlungen:

$("p").wrapAll(document.createElement("p"));

Beispiel für die gemeinsame Nutzung von JQuery-Selektor- und DOM-Knoten-Betriebsübungen

Gemeinsame Methoden zum Einfügen in DOM-Knoten

Beispiel zur Erläuterung der Interpretation von HTML-Tags in DOM-Knoten

Das obige ist der detaillierte Inhalt vonZusammenfassung der DOM-Knotenbetriebsmethoden in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!