jQuery（二）文档结构修改

四、修改文档结构

1、插入和替换元素

（1）语法1：$(target).method(content)，对应有五个method，分别为：

append()           //在目标元素的末尾添加内容，如： $("#log").append("<br/>"+message);

prepend()          // 在目标元素的开始添加内容，如： $("h1").prepend("§");

before()            //在目标元素的前面添加内容，如：$("h1").before("<hr/>");

after()               //在目标元素的前面添加内容，如：$("h1").after("<hr/>");

replaceWith()     //替换目标元素的内容，如：$("hr").replaceWith("<br/>");

（2）语法2：$(content).method(target)，对应有5个method，分别为：

appendTo()      //如：$("<br/>"+message).appendTo("#log");

prependTo()     //如：$(document.createTextNode("§")).prependTo("h1");

insertBefore()   //如：$("<hr/>").insertBefore("h1");

insertAfter()     //如：$("<hr/>").insertAfter("h1");

replaceAll()      //如：$("<br/>").replaceAll("hr");

2、复制元素

插入一个已经在文档中存在的元素，其实是把元素从一个位置移动到新插入的位置。如果不想移动，那就要先复制，再插入，如下：

$(document.body).append("<div id='linklist'><h1>List of Links</h1></div>");

$("a").clone().appendTo("#linklist");

$("#linklist > a").after("<br/>");

clone() 方法默认不复制元素对应的事件处理器以及附在元素上的数据，如果需要复制的话，给clone传入一个true参数。

3、包装元素

另一种类型的插入方式是在一个或者多个元素的外面包装一个或者多个新的元素，jQuery定义了三个包装函数：

wrap()   //在选择的元素外包装新的元素，比如：$("h1").wrap(document.createElement("i"));   在所有h1元素的外面包装i元素，结果：<i><h1>...</h1></i>

包装元素可以是嵌套的，不过在最里层必须只能是一个元素，如：$("body>p:first").wrap("<a name='lead'><div class='first'></div></a>");

wrapInner()  //给所有选择的元素的内容加上新的包装元素，如：$("h1").wrapInner("<i/>");产生的结果是：<h1><i>...</i></h1>

wrapAll()    //所有选择的元素作为一个整体，在整体上加上包装元素，如：$("body>p:not(:first)").wrapAll("<div class='rest'></div>");

4、删除元素

empty()   //把元素的内容清除，元素本身不变

remove() //把选择的元素移除，包括元素本身及其内容，以及元素上的事件处理器和附加数据都被移除。可以接受一个选择器参数

detach()  //和remove类似，不过不会移除元素上的事件处理器和附加数据。一般用于临时删除，以后重新插入的情形。

unwrap() //去掉选择元素的包装元素。