$(function () {
内部插入:append(),appendTo(),prepend(),prependTo()
1.append() 在 xx 中追加(最后插入) yy,在被选元素的结尾插入内容(结束标签之前插入)(剪切粘贴)
(1)选择id为div2的元素,在它的结束标签之前插入内容为“像每个匹配的元素内部追加内容”的p标签
$("#div2").append("<p>向每个匹配的元素内部追加内容</p>");
(2)获取id为p1的标签,把它插入到id为div2的标签元素的结束标签之前(相当于一个剪切粘贴的效果)
$("#div2").append($("#p1"));
2.appendTo() 把 yy 追加(最后插入)到 xx 中;把所有匹配的元素追加到另一个指定的元素的元素集合中(剪切粘贴)
(1)把内容为“把所有匹配的元素追加到另一个指定的元素元素集合中。”的p标签添加到id为div2的标签元素里
$("<p>把所有匹配的元素追加到另一个指定的元素元素集合中。</p>").appendTo($("#div2"));
(2)把id为p2的元素插入到id为div2的标签元素里面
$("#p2").appendTo($("#div2"));
3.prepend() 在 xx 内部的最前面插入 yy,在被选元素的开头插入内容(开始标签之后插入)(剪切粘贴)
(1)选择id为div2的标签元素,在它的开始标签之后插入内容为“向每个匹配的元素内部前置内容”的p标签
$("#div2").prepend("<p>向每个匹配的元素内部前置内容。</p>");
(2)把id为p3的元素插入到id为div1的标签元素的开始标签之后
$("#div2").prepend($("#p3"));
4.prependTo() 把 yy 插入到 xx 内部的最前面,把所有匹配的元素前置到另一个、指定的元素的元素集合中(剪切粘贴)
(1)把内容为“把所有匹配的元素前置到另一个、指定的元素集合中”的p标签添加到id为div2的标签元素里
$("<p>把所有匹配的元素前置到另一个、指定的元素元素集合中</p>").prependTo($("#div2"));
(2)把id为p4的元素插入到id为div2的标签元素里面
$("#p4").prependTo($("#div2"));
外部插入:after(),insertAfter(),before(),insertBefore()
5.after()在被选元素之后插入内容
(1)在id为div1的元素后面添加内容为“匹配的元素之后插入内容”的p标签
$("#div1").after("<p>匹配的元素之后插入内容</p>");
(2)把id为p5的元素插入到id为div1的元素后面
$("#div1").after($("#p5"));
6.insertAfter()在被选元素后面插入HTML元素
(1)在id为div1的元素后面添加内容为“把所有匹配的元素插入到另一个、指定的元素集合的后面”的p标签
$("<p>把所有匹配的元素插入到另一个、指定的元素元素集合的后面</p>").insertAfter($("#div1"));
(2)把id为p6的标签元素插入到id为div1的元素后面
$("#p6").insertAfter($("#div1"));
7.before()在被选元素之前插入内容
$("#div1").before("<p>在每个匹配的元素之前插入内容</p>");
(2)把id为p7的标签元素插入到id为div1的元素前面
$("#div1").before($("#p7"));
8.insertBefore()在被选元素前面插入HTML元素
$("<p>把所有匹配的元素插入到另一个、指定的元素元素集合的前面</p>").insertBefore($("#div1"));
(2)把id为p8的标签元素插入到id为div1的元素前面
$("#p8").insertBefore($("#div1"));
包裹:wrap(),unwrap(),wrapAll(),wrapInner()
9.wrap() 包裹,指定的HTML元素来包裹每个被选元素
(1)给h1标签的外面包裹一层id为div3且文字颜色为黄色的div标签
$("h1").wrap("<div id='div3' style='color:yellow'></div>");
$("p").wrap($("#div3"));
(3)基于上行内容,则为:给p标签的外面包裹一层自带内容的h1标签,再给h1标签的外面包裹一层id为div2且文字颜色为红色的div标签,给p标签的外面包裹一层类名为被选中的p标签本身的文本内容的div标签
$("p").wrap(function () {
return "<divclass='" + $(this).text() + "'></div>";
});
10.unwrap()移除被选元素的父元素
$("p").unwrap();
11.wrapAll() 将所有匹配的元素用单个元素包裹起来 ,会破坏原有文档结构
$("h1").wrapAll("<divid='div4' style='color:red'></div>");
$("p").wrapAll(document.createElement("div"));
12.wrapInner()使用指定的HTML元素来包裹每个被选元素中的所有内容(innerHTML)
(1)把所有p标签的文本外面包裹一层b标签,包裹文本,不包裹标签
$("p").wrapInner("<b></b>");
$("h1").wrapInner(document.createElement("b"));
(3)给p标签的外面包裹一层类名为被选中的p标签本身的文本内容的div标签
$("p").wrapInner(function(){
return '<divclass="' + $(this).text() + '" />';
});
替换:replaceWith(),replaceAll()
13.replaceWith()替换 把所有 x 替换成 y,将所有匹配的元素替换成指定的HTML元素或DOM元素
(1)把页面上所有的p标签全部替换成“<h5>标题</h5>”
$("p").replaceWith("<h5>标题</h5>");
14.replaceAll() 替换 用 y 替换所有x,用匹配的元素替换掉所有selector匹配的元素
(1)把页面上的h1标签全部替换成“<h5>标题</h5>”
$("<h5>标题</h5>").replaceAll("h1");
删除:empty(),remove(),detach()
15.empty() 清空,删除匹配的元素集合中所有的子节点,从被选元素中删除子元素
(1)删除id为div1的元素里的所有子元素
$("#div1").empty();
16.remove()从DOM中删除所有匹配的元素,绑定的事件、附加的数据等都会被移除
(1)所有移除的对象都在objRemove对象中,删除类名为pC1的元素
var objRemove=$(".pC1").remove();
console.log(objRemove);
(2)把objRemove删除的索引值为0的元素插入id为div1的元素里的结尾处
$("#div1").append(objRemove[0]);
17.detach()从DOM中删除所有匹配的元素,绑定的事件、附加的数据等都会被保留下来
(1)删除类名为pC2的元素
var objDetach=$(".pC2").detach();
console.log(objDetach);
(2)把objRemove删除的元素中索引值为0的元素插入id为div2的元素里的结尾处
$("#div2").append(objDetach[0]);
复制:clone()
18.clone()生成被选元素的副本,包含子节点、文本和属性
(1)把id为p4的元素复制并插入到id为div2的元素里的结尾处(复制粘贴)
$("#p4").clone().appendTo($("#div2"));
19.给类名为pC1的元素绑定点击事件,输出绑定点击事件后被点击的元素的文本内容
$(".pC1").click(function() {
console.log($(this).text());
});
20.为元素绑定点击事件,再用remove()以及detach()删除元素之后再插入
比较2个元素插入之后的区别
(1)给类名为pC2的元素绑定点击事件,点击后更改被选中元素的文字颜色
$(".pC2").click(function() {
$(this).css("color", "red");
});
(2)不保留绑定的事件、附加的数据等
$("#removeBtn").click(function () {
$("#div2").append($(".pC2:eq(0)").remove());
});
(3)保留了绑定的事件、附加的数据等
$("#detachBtn").click(function () {
$("#div1").append($(".pC2:eq(1)").detach());
})
});
以上就是我的分享,希望可以帮到你们,新手上道,请多指教。如果有做的不好的地方,欢迎来评论区教导!