[jQuery基础] 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")
})