通过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);
});

标签：jQuery,obj,对象,标签,元素,指定,文档,操作,页面
From： https://www.cnblogs.com/lurenjia-bky/p/17083875.html