美文网首页
jQuery添加、删除、替换节点

jQuery添加、删除、替换节点

作者: David_Rao | 来源:发表于2020-02-01 16:15 被阅读0次

    插入

    内部插入
    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");
    

    相关文章

      网友评论

          本文标题:jQuery添加、删除、替换节点

          本文链接:https://www.haomeiwen.com/subject/oigtxhtx.html