jQuery节点操作

要点：

• 创建节点
• 插入节点
• 包裹节点
• 节点操作

一、创建节点

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

二、插入节点

1.在内部插入节点

1) append(content) 向指定元素内部后面插入节点 content

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

上述也可以写成匿名函数

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

2) A.appendTo.B 将指定元素A移入到指定元素B content 内部后面

<div>div</div>
<span>span</span>

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

3) prepend(content) 向指定元素 content 内部的前面插入节点，插入位置与append相反（后面）

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

4) A.prependTo.B 将指定元素A移入到指定元素B content 内部前面

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

2.外部插入节点

1) after 向指定元素的外部后面插入节点

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

2) insertAfter与after效果一样，只是调换了个位置

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

3) before 向指定元素的外部前面插入节点

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

4) insertBefore与before效果一样，只是调换了个位置

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

三、包裹节点

<div>div</div>

1.wrap 在div外围包裹strong

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

2.unwrap 移出包裹节点

<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

也可以一次性去除

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

3.wrapAll(html) 用 html 将所有元素包裹到一起

<li>1</li>
<li>2</li>
<li>3</li>

$("li").wrapAll("<ul class=‘ul‘></ul>");   // 只包含一个ul
$("li").wrap("<ul class=‘ul‘></ul>");  // 每个li都被包含一个ul

4.wrapInner(html) 向指定元素的子内容包裹一层 html

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

四、节点操作

1.克隆节点 clone

<div>box</div>

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

2.删除节点

<div>box</div>
<div class="box">box</div>
<div>box</div>

1) 用remove()删除

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

2) 用detach()删除

// 绑hover  
$(‘#test‘).hover(function(){  
    $(this).html("hover状态");  
},function(){  
    $(this).html("原始的内容");  
});  
//调用detach;  
$(‘#detach‘).click(function(){  
   //绑detach  
   var test = $(‘#test‘).detach();     
       // $(‘#parent‘).append(test);   // 将test添加到#parent中去，发现#test事件可用
   //绑remove  
   var test = $(‘#test‘).remove();  
   $(‘#parent‘).append(test);          // 将test添加到#parent中去，发现#test事件不可用
});  

区别：detach保留事件，remove不保留事件

3) empty 删除掉节点里的内容

<div>
    <strong>zhang</strong>
</div> 

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

4.替换节点 replaceWith 和 replaceAll

<div>zhang</div>

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

PS : 节点被替换后，所包含的事件行为就全部消失了