jQuery_4_操作文档结构
通过jQuery操作文档结构。
一、内部插入
在指定元素内部添加内容，或移动页面内其它元素到指定元素内。
1、append追加内容到内部（尾部）。
//获取元素对象 var obj = $("#uname");
//将指定内容追加到对象内部 obj.append("内容"); //将页面内的指定元素(例：所有input标签)移动到对象内部 $("input").appendTo(obj);
2、prepend插入到内部（头部）。
//获取元素对象 var obj = $("#uname");
//将指定内容追加到对象内部 obj.prepend("内容"); //将页面内的指定元素移动到对象内部
$("input").prependTo(obj);
二、外部插入
在指定的元素外部添加内容，或移动页面内元素到指定元素附近。
1、在指定元素后面追加内容，或移动页面内对象到指定元素后侧。
//获取元素对象 var obj = $("#uname"); //将指定内容或对象 追加到对象后侧 obj.after("内容 或者 页面内其它对象");
2、在指定元素前面插入内容，或移动页面内对象到指定元素前侧。
//获取元素对象 var obj = $("#uname"); //将指定内容或对象 追加到对象前侧 obj.before("内容 或者 页面内其它对象");
三、包裹
把匹配的元素用其他元素的结构化标记包裹起来。
例子：
把页面中的每一个p标签都用一个div包裹起来，有统一的类名。
$("p").wrap("<div class='wrap'></div>");
移除元素的父元素。这能快速取消 .wrap()方法的效果。
$("p").unwrap()
将所有匹配的元素用单个元素包裹起来。
//用一个div把所有p标签包裹 $("p").wrapAll("<div></div>");
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
//把p标签内的子标签或文本用b标签包裹起来 $("p").wrapInner("<b></b>");
四、替换
用内容或新元素替换选中的元素。
例子:
将所有匹配的元素替换成指定的HTML或DOM元素。
//将页面内的p标签全部用指定的b标签替换 $("p").replaceWith("<b>Paragraph. </b>");
用匹配的元素替换掉所有 selector匹配到的元素。
//使用指定的b标签替换所有的p标签 $("<b>Paragraph. </b>").replaceAll("p");
五、删除
删除指定元素，但是不会把匹配的元素从jQuery对象中删除。
例子：
删除匹配的元素集合中所有的子节点。
//删除页面内的所有p标签的子节点 $("p").empty();
从DOM中删除所有匹配的元素。
//删除页面中的所有p元素，及其绑定的事件，附加的数据 $("p").remove(); //删除页面中的所有p元素，但是其绑定的事件，附加的数据不会被移除。 $("p").detach();
六、复制
复制指定的元素，生成副本。
例子：
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
//克隆页面中的b标签，然后把他们移动到p标签前面 $("b").clone().prependTo("p");
克隆时候附带元素的所有事件处理。
//单击按钮时：把自己的按钮副本移动到自己后侧，且副本也具有复制功能。 ("button").click(function(){ $(this).clone(true).insertAfter(this); });
