jQuery添加、删除、替换节点

2020-02-01  本文已影响0人  David_Rao

插入

内部插入
append()
appendTo()
prepend()
prependTo

外部插入
after()
before()
insertAfter()
insertBefore()

// 在最后插入
父节点.append(子节点)
// 在最前插入
父节点.prepend(子节点)
// 在最后插入
子节点.appendTo(父节点)
// 在最前插入
子节点.prependTo(父节点)
$("button").click(fucntion(){
    ("ul")after($li);
})
// after()会将元素添加到指定元素外部的后面
$("button").click(fucntion(){
    ("ul")before($li);
})
// before()会将元素添加到指定元素的前面
$("button").click(fucntion(){
    $li.insertAfter("ul");
})
// insertAfter()会将元素添加到指定元素外部的后面
$("button").click(fucntion(){
    $li.insertBefore("ul");
})
// insertBefore()会将元素添加到指定元素的前面

删除

remove()删除指定元素及其内容和子元素
empty()删除指定元素的内容和子元素,指定元素自身不会被删除
detach()

// 删除div
$("div").remove()
// 删除div带有item属性的
$("div").remove(".item")
// 删除div内的子元素
$("div").empty()

替换

replaceWith()
replaceAll()

// 1. 新建一个元素
var $h6 = $("<h6>我是标题</h6>");
// 2. 替换所有匹配的元素为()
$("h1").replaceWith($h6);
// replaceAll同理,只是对象顺序不同
$h6.replaceAll("h1");
上一篇下一篇

猜你喜欢

热点阅读