jQuery DOM插入節(jié)點(diǎn)操作指南

字號:


    本章節(jié)主要介紹了jQuery在HTML中動(dòng)態(tài)插入節(jié)點(diǎn)的各種方法,制作成表格,方便大家對比學(xué)習(xí),需要的朋友可以參考下
    方法描述示例
    append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("p").append("<b>你好</b>");
    結(jié)果:
    <p>我想說:<b>你好</b></p>
    appendTo()
    將所有匹配的元素追加到指定的元素中
    。實(shí)際上,使用該方法是顛倒了常規(guī)
    的$(A).append(B)的操作,是將A追加到B中。
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("<b>你好</b>").appendTo("p")
    結(jié)果:
    <p>我想說:<b>你好</b></p>
    prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("p").prepend("<b>你好</b>")
    結(jié)果:
    <p><b>你好</b>我想說:</p>
    prependTo()
    將所有匹配的元素前置到指定的元素中
    。實(shí)際上,使用該方法是顛倒了
    常規(guī)$(A).prepend(B)操作。
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("<b>你好</b>").prependTo("p")
    結(jié)果:
    <p><b>你好</b>我想說:</p>
    after()在每個(gè)匹配的元素后插入內(nèi)容
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("p").after("<b>你好</b>")
    結(jié)果:
    <p>我想說:</p><b>你好</b>
    insertAfter()
    將所有匹配的元素插入到指定元
    素的后面,實(shí)際上,使用該方法
    是顛倒了常規(guī)的$(A).after(B)操作
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("<b>你好</b>").insertAfter("p")
    結(jié)果:
    <p>我想說:</p><b>你好</b>
    before()在每個(gè)匹配的元素之前插入內(nèi)容
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("p").before("<b>你好</b>")
    結(jié)果:
    <b>你好</b><p>我想說:</p>
    insertBefore()
    將所以匹配的元素插入到指
    定的元素的前面。實(shí)際上,
    使用該方法是顛倒了常規(guī)
    的$(A).before(B)的操作。
    HTML代碼:<p>我想說:</p>
    jQuery代碼:
    $("<b>你好</b>").insertBefore("p")
    結(jié)果:
    <b>你好</b><p>我想說:</p>
    以上就是本文的全部內(nèi)容了,希望大家能夠喜歡。