复制节点
如果传入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")
})