jquery node Operation Method Daquan

1.append ()

Append content to each matching element

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' P '). Append (' <b> Hello </b> ');

Results:

<p> I want to say:<b> Hello </b></p>

2.appendTo ()

Appends all matching elements to the specified element. In fact, using this method reverses the general $ (A). Append (b) operation, not appending B to a, but appending A to B

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' <b> Hello </b> '). AppendTo (' P ');

Results:

<p> I want to say:<b> Hello </b></p>

3.prepend ()

Internal front content to each matched element

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' P '). prepend (' <b> Hello </b> ');

Results:

<p><b> Hello </b> i want to say:</p>

4.prependto ()

Place all matching elements in front of the specified element. In fact, using this method is reversed by the general $ (A). Prepend (b) operation, instead of placing b in front of a, instead placing a in front of B

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' <b> Hello </b> '). Prependto (' P ');

Results:

<p><b> Hello </b> i want to say:</p>

5.after ()

Insert content after each matching element

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' P '). After (' <b> Hello </b> ');

Results:

<p> I want to say:<b> Hello </b></p>

6.insertAfter

Inserts all matching elements behind the specified element. In fact, using this method reverses the general $ (A). After (b) operation, not inserting b behind a, but inserting a into the back of B

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' <b> Hello </b> '). InsertAfter (' P ');

Results:

<p> I want to say:<b> Hello </b></p>

7.before

Insert content before each matching element

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' P '). before (' <b> Hello </b> ');

Results:

<p><b> Hello </b> i want to say:</p>

8.insertBefore

Inserts all matching elements in front of the specified element. In fact, using this method reverses the general $ (A). After (b) operation, instead of inserting b into front of a, insert a into front of b

HTML code:

<p> I want to say:</p>

jquery Code:

$ (' <b> Hello </b> '). InsertBefore (' P ');

Results:

<p><b> Hello </b> i want to say:</p>

9.remove ()

The function is to remove all matching elements from the DOM, and the passed in parameters are used to filter the elements according to the jquery expression

Watch out! When a node is removed with the Remove () method, all descendant nodes that the node contains are deleted at the same time. The return value of this method is a reference to the node that has been deleted, so you can use the elements later.

Instance:

var $li =$ (' ul li:eq (1) '). Remove ()///After getting the second <li> element node, delete it from the Web page

$li. AppendTo (' ul ');//Add the node you just deleted back to the <ul> element

The Remove () method can also selectively delete elements by passing parameters

Instance:

$ (' ul Li '). Remove (' li[title!= pineapple] ');//<li> element in the attribute title not equal to ' pineapple ' <li> element Delete

10.empty ()

Strictly speaking, the empty () method is not to delete a node, but to empty the node, and he can empty all descendant nodes in the element

Instance:

$ (' ul li:eq (1) '). Empty ();//After getting the second <li> element node, empty the contents of this element, note that it is in the element!

When the code runs, the contents of the second <li> element are emptied, leaving only the <li> tag default symbol ' · '

11.clone ()

Instance:

$ (' ul Li '). Click (function () {

$ (this). Clone (). AppendTo (' ul ');//Copy the current node and append it to the <ul> element

})

Watch out! when a node is copied, the new element being copied does not have any behavior. If a new element is required to also have behavior, pass the parameter true when using clone.

Instance:

$ (this). Clone (true). AppendTo (' ul ');

12.replaceWith () and ReplaceAll ()

The function of the ReplaceWith () method is to replace all matching elements with the specified HTML or DOM elements.

Instance:

$ (' P '). replacewith (' <strong> How do you like it the least? </strong> ');

The same function can also be implemented using Relaceall (), which works the same as the Relacewith () method, but reverses the relacewith () operation.

Instance:

$ (' <strong> the way you least like it? </strong> '). ReplaceAll (' P ');

Watch out! If an event has been bound to an element before the substitution, the replaced event will disappear with the replaced element, and the event needs to be re-bound on the element.

13.wrap ()

Wrap a node with other tags. This method is useful for structuring markup that requires additional markup to be inserted into the document, and she does not break the semantics of the original document.

jquery Code:

$ (' strong '). Wrap (' <b></b> ');//use <b> tag to wrap <strong> elements together

Results:

<b><strong title= ' Your least favorite method is ' > your favorite method is?</strong></b>

14.wrapAll ()

Wraps all matching elements with one element. Unlike the Wrap () method, The Wrap () method is a separate package for all elements.

HTML code:

<strong title= ' Methods ' > Methods </strong>

<strong title= ' Methods ' > Methods </strong>

<ul>

<li title= ' method One ' > method one </li>

<li title= ' Method II ' > method two </li>

<li title= ' method Three ' > method three </li>

</ul>

If wrapping <strong> elements with wrap () method

jquery Code:

$ (' strong '). Wrap (' <b></b> ');

Results:

<b><strong title= ' Methods ' > Methods </strong></b>

<b><strong title= ' Methods ' > Methods </strong></b>

If you use the Wrapall () method to wrap <strong> elements

jquery Code:

$ (' strong '). Wrapall (' <b></b> ');

Results:

<b>

<strong title= ' Methods ' > Methods </strong>

<strong title= ' Methods ' > Methods </strong>

</b>

15.wrapInner ()

Wrap the child content of each matching element (including the text node) with other structured tags.

jquery Code:

$ (' strong '). Wrapinner (' <b></b> ');

Results:

<strong title= ' favorite method ' ><b> preferred method </b></strong>

jquery node Operation Method Daquan