Common DOM operations----native JavaScript and jquery

1. Create an element text node

Javascript:

Document.createelement (), which receives only one parameter and needs to be manually added to the document tree after creation, for example:

var newdiv = document.createelement ("div");
if (document.body) {document.body.appendChild (newdiv);
}else{
Document.documentElement.appendChild (NEWDIV);
}

document.createTextNode (), receives only one parameter, that is, the text to be inserted into the node;

jquery: Direct $ ("<div></div>"), or below:

• Wrap () //$A. Wrap (' B ') is an outer layer of element A adds an HTML result of type B

<div class= "Container" >  <div class= "inner" >Hello</div>  <div class= "inner" >goodbye </div></div>
$ ('. Inner '). Wrap (' <div class = ' new '/> ');

Results:

　　<div class="container"> 　　　　<div class="new"> 　　　　　 <div class="inner">Hello</div> 　　　　</div> 　　　　<div class="new"> 　　　　　　<div class="inner">Goodbye</div> 　　　　</div> 　　</div>

• Wrapall ()// creates a new <div> package with all the matching elements:

<div class= "Container" >  <div class= "inner" >Hello</div>  <div class= "inner" >goodbye </div></div>$ ('. Inner '). Wrapall (' <div class= ' new '/> ');

　结果：　 　　<div class="container"> 　　　<div class="new"> 　　　　<div class="inner">Hello</div> 　　　　<div class="inner">Goodbye</div> 　　 </div>    </div>

• Wrappinner () //$A. Wrapinner (' B ') is an inner layer of element A adds an HTML result of type B

<div class= "Container" >  <div class= "inner" >Hello</div>  <div class= "inner" >goodbye </div></div>$ ('. Inner '). Wrapinner (' <div class= ' new '/> ');

Results: 　　<div class="container"> 　　　　<div class="inner"> 　　　　　　<div class="new">Hello</div> 　　　　</div> 　　　　<div class="inner"> 　　　　　　<div class="new">Goodbye</div> 　　　　</div> 　　</div>

2. Node relationship and operation

Javascript:

Parent node: parentnode

Child node: childNodes

Brother Node: nextsibling,previoussibling

Related actions:

• AppendChild () Adds a new child node to the end of the list of child nodes
• Insetbefore () Insert a new child node before it has a child node
• ReplaceChild () Replace node
• RemoveChild () Delete node
• CloneNode (TRUE/FALSE) Replication node

jquery: (compare multiple options, see http://www.css88.com/jqapi-1.9/Manual for details)

Parent element: Parental () parents ()

Child element: Children ()

Brother node: Next () Nextall () prev () Prevall () siblings () ...

Related actions:

Insert inside node, insert content into child node

• Append () AppendTo () Adds a new child node to the end of the list of child nodes, noting that the two content and target locations are different, just the opposite
• Prepend () Prependto () A new child node is inserted before the child node, note that the two contents and the target are in different positions, just the opposite

Node external insert, inserted content becomes sibling node

• After () before ()
• InsertAfter () insertbefore ()

• The ReplaceAll () replacewith () function is similar, but the target is the opposite of the source

• Remove () detach () is similar in that it removes the element, which does not remove the bound event and the jquery data associated with that element
• Empty () does not accept any parameters. Removes not only child elements (and other descendant elements), but also the text in the element

• Clone (Flase/true) deeply copies all matching element collections, including all matching elements, subordinate elements of matching elements, and text nodes. Unlike native JavaScript, the false/true here indicates whether an event handler on an element is copied, whereas the native representation of a deep clone or a shallow clone

Common DOM operations----native JavaScript and jquery