jquery node Operations

Points:

• Create a Node
• Inserting nodes
• Parcel nodes
• Node operations

First, create a node

var box = $("<div>box</div>");$("body").append(box);

Second, insert the node

1. Insert the node internally

1) Append (content) Inserts nodes inside the specified element content

$("div").append("<strong>strong</strong>");        <div>box<strong>strong</strong></div>

The above can also be written as an anonymous function

$("div").append(function(index, html) {    return"<strong>strong</strong>";       // <div>box<strong>strong</strong></div>});

2) A.APPENDTO.B moves the specified element A into the specified element B inside the content behind

<div>div</div><span>span</span>$("span").appendTo($("div"));      <div>div<span>span</span></div>

3) prepend (content) Inserts a node in front of the content inside the specified element, and the insertion position is opposite to append (later)

$("div").prepend("<span>header</span>"); //<div><span>header</span>div</div>

4) A.PREPENDTO.B to move the specified element A into the specified element B inside the content front

$("<span>header</span>").prependTo($("div"//<div><span>header</span>div</div>

2. External insertion Node

1) After the node is inserted after the outside of the specified element

$("div").after("<span>outer footer</span>");   <div>div</div><span>outer footer</span>

2) InsertAfter is the same as after effect, just swapped a position

$("<span>outer footer</span>").insertAfter($("div"));

3) before inserts a node into the outer front of the specified element

$("div").before("<span>outer header</span>");  <span>outer header</span><div>div</div>

4) InsertBefore the same as the before effect, just swapped a position

$("<span>outer header</span>").insertBefore($("div"));  // // <span>outer header</span><div>div</div>

Third, the Parcel node

<div>div</div>

1.wrap wrapping strong on Div perimeter

$("div").wrap("<strong>123</strong><strong>123<div>div</div></strong>

2.unwrap Removing a parcel node

<div ;  <ul ;  <li ;  1</li ;  <li ;  2</li ;  < li ;  3</li   </ul ;  div ;   

$("div ul li:first").unwrap();     // 去掉了li的外包ul$("div li:first").unwrap();        // 再一次调用去除了div

can also be removed at once

$("div ul li:first").unwrap().unwrap();

3.wrapAll (HTML) wraps all the elements together in HTML

<li ;  1 </li ;  <li ;  2</li ;  <li  >  3</li ;  $ ("Li"). Wrapall (" <ul  class  = ' ul ' ;  </ul  > "); Contains only one ul$ ("Li"). Wrap ("<ul  class  = ' ul ' ;  </ul ;  "); Each li is included with a UL 

4.wrapInner (HTML) wraps a layer of HTML into the child content of the specified element

$("li").wrapInner("<a href=‘###‘></a>");   <li><a href=‘###‘>1</a></li> * 3个

Iv. node operation

1. Cloning node clone

<div>box</div>$("body").append($("div").clone(true));      // 当为true时，不仅复制元素和内容，还复制事件行为

2. Delete a node

<div>box</div><divclass="box">box</div><div>box</div>

1) Delete with remove ()

$("div").remove();     // 全部删除$("div").remove(".box");   // 只删除class=box的div

2) Delete with detach ()

//Tied hover$(' #test '). Hover ( function(){$( This). HTML ("Hover status"); }, function(){$( This). HTML ("Original content"); });//Call detach; $(' #detach '). Click ( function(){     //Tied detach   varTest = $ (' #test '). Detach ();//$ (' #parent '). Append (test); Add test to #parent and find #test event available   //bind remove   varTest = $ (' #test '). Remove (); $(' #parent '). append (test);//Add test to #parent to find #test event unavailable});

Difference: Detach reserved Events, remove does not preserve events

3) Empty Delete the contents of the node

<div>    <strong>zhang</strong></div> $("div").empty();      // 就剩下一个空的div

4. Replacing nodes ReplaceWith and ReplaceAll

<div>zhang</div>$("div").replaceWith("<strong>strong</strong>");       // 用strong替换掉div$("<strong>strong</strong>").replaceAll($("div"));      // 同上

PS: When the node is replaced, the event behavior that it contains disappears.

jquery node Operations