Table of Contents
添加节点
内部插入
外部插入
删除节点
remove([expr])
empty()
detach([expr])
替换节点
replaceWith(content|fn)
replaceAll(selector)
复制节点
clone([Even[,deepEven]])
浅复制
深复制
浅复制和深复制的区别
添加节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script></head><body><button>添加节点</button><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><div>我是div</div></body></html>
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后
$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").append($li);//$li.appendTo("ul");});
prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").prepend($li);$li.prependTo("ul");});
外部插入
after(content|fn)
会将元素添加到指定元素外部的后面
$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").after($li);});
before(content|fn)
会将元素添加到指定元素外部的前面
$("button").click(function () {var $li = $("<li>新增的li</li>");$("ul").before($li);});
insertAfter(content)
insertBefore(content)
$li.insertAfter("ul");$li.insertBefore("ul");
运行结果与上面的 after() before() 方法一致 不做展示
删除节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script></head><body><button>删除节点</button><ul><li class="item">我是第1个li</li><li>我是第2个li</li><li class="item">我是第3个li</li><li>我是第4个li</li><li class="item">我是第5个li</li></ul><div>我是div<p>我是段落</p></div></body></html>
remove([expr])
删除
$("button").click(function () {$("div").remove();});
$("button").click(function () {$("li").remove(".item");});
empty()
删除指定元素
$("button").click(function () {$("p").empty();});
detach([expr])
删除指定元素的内容和子元素, 指定元素自身不会被删除
$("button").click(function () {var $div = $("div").remove();console.log($div);$("body").append($div);});$("div").click(function () {alert("div被点击了");});
利用remove删除之后再重新添加,原有的事件无法响应
利用detach删除之后再重新添加,原有事件可以响应
$("button").click(function () {var $div = $("div").detach();console.log($div);$("body").append($div);});$("div").click(function () {alert("div被点击了");});
替换节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="../jQuery基础/js/jquery-1.12.4.js"></script></head><body><button>替换节点</button><h1>我是标题1</h1><h1>我是标题1</h1><p>我是段落</p></body></html>
replaceWith(content|fn)
替换
$("button").click(function () {var $h6 = $("<h6>我是标题6</h6>");$("h1").replaceWith($h6);});
replaceAll(selector)
替换所有匹配的元素为指定的元素
$("button").click(function () {var $h6 = $("<h6>我是标题6</h6>");$h6.replaceAll("h1");});
复制节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.12.4.js"></script></head><body><button>浅复制节点</button><button>深复制节点</button><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li></ul></body></html>
clone([Even[,deepEven]])
如果传入false就是浅复制, 如果传入true就是深复制
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件
浅复制
$("button").eq(0).click(function () {// 1.浅复制一个元素var $li = $("li:first").clone(false);// 2.将复制的元素添加到ul中$("ul").append($li);});$("li").click(function () {alert($(this).html());});
、
深复制
$("button").eq(1).click(function () {// 1.深复制一个元素var $li = $("li:first").clone(true);// 2.将复制的元素添加到ul中$("ul").append($li);});$("li").click(function () {alert($(this).html());});
浅复制和深复制的区别
对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
详细可看文章 ：JavaScript中浅拷贝和深拷贝的区别和实现
