jQuery创建、复制、替换、包裹、删除节点

一、创建节点

创建子元素类：
创建的内容作为目标元素的子元素。

append()/appendTo() :目标元素内部结尾处插入内容(标签、文本内容)。
$(selector).append( newContent )
$( newContent ).appendTo(selector)

$(".box").append("<p>append()/appendTo()</p>");
$("<p>append()/appendTo()</p>").appendTo(".box");

prepend()/prependTo() : 目标元素内部开头插入内容(标签、文本内容)。
$(selector).prepend( newContent )
$( newContent ).prependTo(selector)

$(".box").prepend("<p>prepend()/prependTo()</p>");
$("<p>prepend()/prependTo()</p>").prependTo(".box");

在这里插入图片描述
创建兄弟元素类：
创建的内容作为目标元素的兄弟元素。

after()/insertAfter() :目标元素后面插入内容(标签、文本内容)。
$(selector).after( newContent )
$( newContent ).insertAfter(selector)

$(".box").after("<p>after()/insertAfter()</p>");
$("<p>after()/insertAfter()</p>").insertAfter(".box");

before()/insertBefore() :目标元素前面插入内容(标签、文本内容)。
$(selector).before( newContent )
$( newContent ).insertBefore(selector)

$(".box").before("<p>before()/insertBefore()</p>");
$("<p>before()/insertBefore()</p>").insertBefore(".box");

在这里插入图片描述

二、复制节点

clone()：浅度克隆被选元素（包含子节点、文本和属性）。
$(selector).clone()

 $("p").click(function(){
     console.log("点击有效");
});
$("button").click(function(){
    $(".box").append($("p:nth-of-type(2)").clone());
});

clone(true)：深度克隆被选元素（包含子节点、文本和属性、事件和附带数据）。
如上，只有深度克隆后的p元素点击事件才会有效。
$(selector).clone(true)

三、替换节点

replaceWith() : 用指定的 HTML 内容或元素替换被选元素。
selector.replaceWith( newContent )

$("button").click(function(){
    $("p").replaceWith("<b>Hello world!</b>");
});

返回值是替换前的节点信息。如上用b元素替换p元素后的返回值：
在这里插入图片描述

replaceAll() : 用指定的 HTML 内容或元素替换被选元素。
$( newContent ).replaceAll(selector)

 $("button").click(function(){
    $("<b>Hello world!</b>").replaceAll("p");
});

和replaceWith()作用相同。差异在于内容和选择器的位置，以及返回值不同，replaceAll()的返回值是替换后的节点信息。如上用b元素替换p元素后的返回值：
在这里插入图片描述

四、包裹节点

wrap() : 给匹配的每一个元素都加一个包裹。
$(selector).wrap( wrapper )

wrapper 可能是：

新元素 - 比如 (document.createElement(“div”))

HTML 代码 - 比如 (’<div ></div>’)

已存在的元素 - 比如 ($(".box"))

一个回调函数 - 比如 function() { return ‘<div></div>’; })
已存在的元素不会被移动，只会被复制，并包裹被选元素。

 $("button").click(function(){
    //$("p").wrap("<div/>");
    $('p').wrap(function() {
    	return '<div></div>';   //与第一种类似，只是写法不一样
	})
});

在这里插入图片描述
如上给每个p元素添加一个div包裹，被添加的包裹有原有标签对应的样式。返回值是所有被包裹的p元素。

unwrap() : 删除被选元素的父元素，但保留自身内容，不影响其他元素。
$(selector).unwrap()

$("button").click(function(){
    $("p").unwrap();
});

unwrap()只删除被选元素最近的直接父元素。返回值是被选元素。

wrapAll() : 给被选元素添加一个公共的包裹。
$(selector).wrapAll(wrapper)
用法和wrap()一致。

$("button").click(function(){
    $("p").wrapAll("<div/>");
});

在这里插入图片描述
如果被选元素结构不一致，并列的p元素某一个或多个有父级，wrapAll会以第一个p标签结构为准为被选元素添加一个包裹，如下给p标签加一个大包裹：

<div class="box">
    <div><p>文本内容1</p></div>
    <section><p>文本内容2</p></section>
    <p>文本内容3</p>
</div>

在这里插入图片描述

wrapInner() : 给被选元素内部添加一个包裹。
$(selector).wrapInner(wrapper)

$("button").click(function(){
    $("p").wrapInner("<b/>");
});

和wrap()用法一致。

五、删除节点

remove()：删除指定元素（包括所有文本和子节点）。

<div class="box">
    <p>文本内容</p>
    <p>文本内容</p>
</div>
<button>按钮</button>
<script>
    $(".box").click(function(){
        console.log("事件有效");
    });
    $("button").click(function(){
        $("body").append( $(".box").remove());
    });
</script>

该方法删除选定元素的本身及其所有的子孙元素、文本节点等，但不会把匹配的元素从 jQuery 对象中删除，也就是说将来可以再次使用被remove的元素，只是没有了原有的所有信息、数据、事件等。如上当你点击按钮后再次点击div不会输出事件有效
` remove()支持删除指定元素，允许对被删元素进行过滤，如：

$("button").click(function(){
    $("p").remove(":nth-of-type(2)");//删除第二个p元素
});

detach()：删除指定元素（包括所有文本和子节点）。

<div class="box">
    <p>文本内容</p>
    <p>文本内容</p>
</div>
<button>按钮</button>
<script>
    $(".box").click(function(){
        console.log("事件有效");
    });
    $("button").click(function(){
        $("body").append( $(".box").detach());
    });
</script>

和remove()唯一的区别在于detach()删除元素后保留了数据、事件等信息。如上删除后再次点击div，点击事件是有效的。
（3）empty()：删除被选元素的子元素（包括所有文本和子节点）。

$("button").click(function(){
   $(".box").empty();
});

只是清空子元素，被选元素本身不会受影响。