Summary of DOM node operation methods in jQuery

This article mainly introduces the complete method of operating DOM nodes in jQuery. Friends who are interested should take a look at it. I hope it can help everyone better learn how to operate DOM nodes in jQuery.

append(content | fn): Append content to each matching element.

For example: Append some HTML tags to all paragraphs.

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

appendTo(): ​​This method reverses the conventional $(A).append(B) operation, that is, it does not append B to A, but appends A to B

For example: Append all paragraphs to the element with ID value foo.

<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(): Prepend content inside each matching element

For example: Prepend some HTML markup code to all paragraphs.

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

prependTo(content):

Prepend all matching elements to another, specified element element collection. In fact, using this method reverses the conventional $(A).prepend(B) operation, that is, instead of prepending B to A, A is prepended to B.

For example: Append all paragraphs to the element with ID value foo.

<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(): Insert content after each matching element. The inserted element and the inserted element belong to the same level, non-parent-child relationship

For example: insert some HTML markup code after all paragraphs.

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

before(): Insert content before each matching element.

For example: Insert some HTML markup code before all paragraphs

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

insertAfter(): Insert all matching elements after another, specified element element set. In fact, using this method reverses the conventional $(A).after(B) operation, that is, instead of inserting B after A, insert A after B

For example: put all Paragraphs are inserted after an element. Same as $("#foo").after("p")

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

insertBefore(): Insert all matching elements in front of another, specified element set. In fact, using this method reverses the conventional $(A).before(B) operation, that is, instead of inserting B before A, A is inserted before B.

For example: insert all paragraphs before an element. Same as $("#foo").before("p").

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

wrap(): Wrap all matching elements with structured tags of other elements.

This kind of wrapping is most useful for inserting additional structured markup into the document without destroying the semantic quality of the original document. The principle of this function is to examine the first element provided (which is dynamically generated from the provided HTML markup code) and find the top-level ancestor element in its code structure - this ancestor element is the wrapping element. This function cannot be used when the element in the HTML markup code contains text. Therefore, if you want to add text, you should add it after the package is completed.

For example: DOM element used to wrap the target element

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

unwrap(): This method will remove the parent element of the element. This can quickly cancel the effect of the .wrap() method. Matching elements (and their siblings) replace their parent elements in the DOM structure.

For example: Wrap each paragraph with p with the ID "content"

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

wrapAll(): Wrap all matching elements with a single element

This is different from '.wrap()' 'Wrap each matching element once. This kind of wrapping is most useful for inserting additional structured markup into a document without destroying the semantic quality of the original document. The principle of this function is to examine the first element provided and find the top ancestor element in its code structure - this ancestor element is the wrapping element.

For example: wrap all paragraphs with a generated p

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

or

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

Related recommendations:

Example sharing JQuery selector and DOM node operation exercises

Common methods of inserting inside DOM nodes

Examples to explain the interpretation of HTML tags into DOM nodes

The above is the detailed content of Summary of DOM node operation methods in jQuery. For more information, please follow other related articles on the PHP Chinese website!