Home > Developer > Web Develop
One, add nodes
Add internal child node method: The internal node is the son node
Append () inserts content at the end of the selected element
AppendTo () inserts the specified content to the end of the selected label interior
Prepend () inserts content at the beginning of the selected element
Prependto () inserts the specified content at the beginning of the selected label interior
"Add sibling node method": Sibling is brother relationship
After () inserts content in the back face of the selected element 's sibling
InsertAfter () adds the specified content to the back of the selected label sibling
Before () inserts content in the front face of the selected element 's peers
InsertBefore () adds the specified content to the front of the selected label sibling
Attention:
1, the above methods have the same effect. The difference is in syntax: the location of content and selectors, and the ability to use functions to insert content.
2,append, prepend, after, before can use functions to insert content .
Second, delete the node
Remove () deletes the selected element (and its child elements)
Empty () removes child elements from the selected element
Third, cloning nodes
The Clone (True) method generates a copy of the selected element, including child nodes, text, and attributes.
parameters: Optional. Boolean value. Specifies whether to copy all event handling for an element. False by default .
Iv. replacing nodes
ReplaceWith () replaces the specified content with the selected element
ReplaceAll ()
$ (selector). ReplaceWith (content)
$ (content). ReplaceAll (selector)
Note:replacewith () can be replaced with a function,replaceall is not.
Five, parcel node
Wrap () wraps the matched element with the specified content or element.
Wrapall () wraps all matching elements with the specified contents or elements.
Wrapinner () wraps the child content of each matched element with the specified content or element.
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"Xml:lang= "en"><Head> <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"> <title>Document</title></Head><Body> <inputtype= "button"value= "Add"> <P>Oh, hello! What fruit do you like to eat?</P> <ul> <Li>Grape</Li> <Li>Banana</Li> <Li>Durian</Li> </ul> <span>Content of the SPAN tag 1</span> <span>Content of the SPAN tag 2</span></Body></HTML><Scripttype= "Text/javascript"src= "Js/jquery-1.12.4.min.js"></Script><Scripttype= "Text/javascript"> //Add internal child node method: The internal node is the son node //added at the end of the //$ (' ul '). Append (' <li> apple 1</li> '); Add the specified Li content at the end of the UL label //$ (' ul '). Append (function () {return "<li> Apple-function </li>"}); Add the specified Li content at the end of the UL label //$ (' <li> Apple 2</li> '). AppendTo (' ul ');//Add the specified Li content to the end of the UL label //added at the beginning of the //$ (' ul '). prepend (' <li> pear 1</li> '); Add the specified Li content at the beginning of the UL tag //$ (' ul '). Prepend (function () {return "<li> pear-function </li>"}); Add the specified Li content at the beginning of the UL tag //$ (' <li> pear 2</li> '). Prependto (' ul ');//Add the specified Li content to the beginning of the UL label //"Add sibling node method": Sibling is brother relationship //$ (' ul '). After (' <div> fruits are delicious 1</div> '); Add div content after the UL label sibling //$ (' <div> fruits are delicious 2</div> '). InsertAfter (' ul ');//Add div content to the back of the UL peer //$ (' ul '). Before (' <div> below fruit what you like to eat 1</div> '); Add div content in front of the UL label sibling //$ (' <div> below fruit you like to eat what 2</div> '). InsertBefore (' ul ');//Add div content to the front of the UL peer //Delete a node //$ (' ul Li '). EQ (1). empty (); Empties the child nodes of the selected element //var $li = $ (' ul Li '). EQ (2). Remove (); Delete selected elements (both self and child nodes) //$ (' ul '). Append ($li);//Add the deleted Li element back to the inside of UL //Clone (copy) method $('input'). Click (function(){ var$p= $('P'). Clone (true); //clone P tag, true means to clone a copy of the event $('ul'). After ($p); //Insert the cloned P tag into the back of the UL interior }); //Replace node //$ (' P '). ReplaceWith ("<p> Hello, would you like the fruit below?" </p> "); //$ (' P '). ReplaceWith (function () {return "<p> Hello, do you like the fruit below????? </p> "}); //$ ("<p> Hello, would you like the fruit below????? </p> "). ReplaceAll (' P '); //Parcel Nodes $('input'). Click (function(){ //$ (' span '). Wrap (' <div></div> ');//Use DIV tags to wrap each span tag separately $('span'). Wrapall ('<div></div>'); //wrap all span tags together with div tags $('span'). Wrapinner ('<b></b>'); //wrapping content inside a span tag with a B tag });</Script>
Node operation of jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
