JQuery DOM node Operation method Daquan

Append (Content | fn): appends content to each matching element. Reference: http://jquery.cuishifeng.cn/append.html

For example, append some HTML tags to all the 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 normal $ (A). Append (b) operation, that is, instead of appending B to a, append a to B

For example, append all paragraphs to an element with an ID value of foo.

<p>i would like to say: </p><div></div><div></div>$ ("P"). AppendTo ("div");< Div><p>i would like to say: </p></div><div><p>i would like to say: </p></div >

Prepend (): front content to each matched element

For example, put some HTML markup code in front of 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):

puts all matching elements in front of another, specified set of element elements. In fact, using this method is reversed by the regular $ (A). Prepend (b) operation, that is, instead of putting B in front of a, instead of placing a in front of B.

For example: append all paragraphs to an element with an ID value of foo.

<p>i would like to say: </p><div id= "foo" ></div>$ ("P"). Prependto ("#foo"); <div id= "foo" > <p>i would like to say: </p></div>

After (): inserts the content after each matching element. The inserted element and the inserted element belong to the same level, not the parent-child relationship

For example, insert some HTML markup code after all the paragraphs.

<p>i would like to say: </p>$ ("P"). After ("<b>Hello</b>"), <p>i would like to say: </p ><b>Hello</b>

Before (): inserts the content before each matching element.

For example, insert some HTML markup code before all the paragraphs

<p>i would like to say: </p>$ ("P"). Before ("<b>Hello</b>"); [<b>hello</b><p>i would like to say: </p>]

InsertAfter (): inserts all matching elements behind another, specified set of element elements. In fact, using this method reverses the normal $ (A). After (b) operation, that is, instead of inserting b behind a, insert a into the back of B

For example, after inserting all paragraphs into an element. Same as $ ("#foo"). After ("P")

<p>i would like to say: </p><div id= "foo" >hello</div>$ ("P"). InsertAfter ("#foo"); <div id= " Foo ">hello</div><p>i would like to say: </p>

InsertBefore (): inserts all matching elements in front of another, specified set of element elements. In fact, using this method is reversed by the regular $ (A). Before (b) operation, that is, instead of inserting b into front of a, insert a into front of B.

For example, to insert all paragraphs before an element. Same as $ ("#foo"). Before ("P").

<div id= "foo" >hello</div><p>i would like to say: </p>$ ("P"). InsertBefore ("#foo"); <p>i Would like to say: </p><div id= "foo" >Hello</div>




wrap()：Wrap all matching elements with a structured tag of other elements.

This wrapper is most useful for inserting additional structured markup into a document, and it does not break the semantic quality of the original document. The principle of this function is to examine the first provided element (which is dynamically generated by the provided HTML markup code) and to find the topmost ancestor element in its code structure-the ancestor element is the package element. This function cannot be used when an element in an HTML markup code contains text. Therefore, if you want to add text, you should add it after the package is complete.

例如：用于包装目标元素的DOM元素

<div class= "container" >  <div class= "inner" >Hello</div>  < div class= "inner" >goodbye</div></div>$ ('. Inner '). Wrap (function ()  {  return   ' <div class= '  + $ (This). Text ()  +  '  /> ';}); <div class= "Container" >  <div class= "Hello" >    <div  class= "inner" >hello</div>  </div>  <div class= "Goodbye" >     <div class= "inner" >Goodbye</div>  </div></div> 

unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

For example, use a div with the id "content" to wrap each paragraph together

<div> <p>Hello</p> <p>cruel</p> <p>world</p></div>$ ("P"). Unwrap () <p>Hello</p><p>cruel</p><p>World</p>

Wrapall (): wraps all matching elements together with a single element

this is in '. Wrap () ' <a href= "Http://docs.jquery.com/Manipulation/wrap" title= "Manipulation/wrap" ></a> is different, ' . Wrap () is wrapped once for each matching element. This wrapper is most useful for inserting additional structured markup into a document, and it does not break the semantic quality of the original document. The principle of this function is to examine the first provided element and find the topmost ancestor element in its code structure-the ancestor element is the wrapper element.

For example: wrap all paragraphs together with a generated div

$ ("P"). Wrapall ("<div></div>"), or $ ("P"). Wrapall (Document.createelement ("div"));

This article is from the "Zengestudy" blog, make sure to keep this source http://zengestudy.blog.51cto.com/1702365/1971505

JQuery DOM node Operation method Daquan