jQuery--节点操作

文档处理

复制节点

如果传入false就是浅复制, 如果传入true就是深复制

浅复制只会复制元素, 不会复制元素的事件

深复制会复制元素, 而且还会复制元素的事件

浅复制

$("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false) // 2.将复制的元素添加到ul中 $("ul").append($li) })

深复制

$("button").eq(1).click(function () { // 1.深复制一个元素 var $li = $("li:first").clone(true) // 2.将复制的元素添加到ul中 $("ul").append($li) })

删除节点

remove([expr]) / detach([expr])

删除指定元素

$("button").click(function () { $("div").remove() // $("div").empty() // 利用remove删除之后再重新添加,原有的事件无法响应 var $div = $("div").remove() // console.log($div) $("body").append($div) }) empty()

删除指定元素的内容和子元素, 指定元素自身不会被删除

$("button").click(function () { $("li").remove(".item") // 利用detach删除之后再重新添加,原有事件可以响应 var $div = $("div").detach() // console.log($div) $("body").append($div) })

替换节点

replaceWith(content|fn) / replaceAll(selector)

替换所有匹配的元素为指定的元素

$("button").click(function () { // 1.新建一个元素 var $h6 = $("<h6>我是标题6</h6>") // 2.替换元素 // $("h1").replaceWith($h6) $h6.replaceAll("h1") })

添加节点

内部插入

append(content|fn) / appendTo(content)

会将元素添加到指定元素内部的最后

$("button").click(function () { // 1.创建一个节点 var $li = $("<li>新增的li</li>") // 2.添加节点 // $("ul").append($li) $li.appendTo("ul") }) prepend(content|fn) / prependTo(content)

会将元素添加到指定元素内部的最前面

$("button").click(function () { // 1.创建一个节点 var $li = $("<li>新增的li</li>") // 2.添加节点 $("ul").prepend($li) // $li.prependTo("ul") })

外部插入

after(content|fn) / insertAfter(content)

会将元素添加到指定元素外部的后面

$("button").click(function () { // 1.创建一个节点 var $li = $("<li>新增的li</li>") // 2.添加节点 $("ul").after($li) // $li.insertAfter("ul") }) before(content|fn) / insertBefore(content)

会将元素添加到指定元素外部的前面

$("button").click(function () { // 1.创建一个节点 var $li = $("<li>新增的li</li>") // 2.添加节点 $("ul").before($li) // $li.insertBeforer("ul") })