App下載

jQuery怎么添加內(nèi)容?JQuery插入內(nèi)容介紹!

Steven 2021-12-10 11:09:28 瀏覽數(shù) (6059)
反饋

前端頁(yè)面使用JavaScript(jQuery)無(wú)非就那些使用場(chǎng)景:動(dòng)畫,Ajax,內(nèi)容填充和渲染等。其中內(nèi)容填充的方法通常使用添加元素的方法或者添加內(nèi)容的方法。以jQuery為例,可以使用after(),append(),appendTo()等方法來(lái)插入新內(nèi)容。但它們之間也有著一定的區(qū)別。今天小編就來(lái)講講jQuery中這幾種插入方法的區(qū)別吧!

append()

append()方法是一個(gè)往被選元素結(jié)尾插入內(nèi)容的方法。注意,他是往一個(gè)元素的內(nèi)容結(jié)尾插入內(nèi)容,所以插入的內(nèi)容還在這個(gè)元素中。舉個(gè)例子,有如下HTML結(jié)構(gòu):

<div>
    <ul>
        <li>這是原本的內(nèi)容</li>
    </ul>
</div>

我們對(duì)li元素使用append方法,插入一段新內(nèi)容:?這是新內(nèi)容?該結(jié)構(gòu)就會(huì)變成:

<div>
    <ul>
        <li>這是原本的內(nèi)容這是新內(nèi)容</li>
    </ul>
</div>

如果插入的內(nèi)容是HTML標(biāo)簽,那么它會(huì)被正常的渲染(展示在頁(yè)面上)

 與append()方法對(duì)應(yīng)地,有一個(gè)prepend()方法,可以用來(lái)在被選元素的開頭插入內(nèi)容。 

after()

after()方法是一個(gè)往被選元素后插入內(nèi)容的方法。注意,他是往一個(gè)元素的后面插入內(nèi)容,所以插入的內(nèi)容不在這個(gè)元素中。

舉個(gè)例子,有如下HTML結(jié)構(gòu):

<div>
    <ul>
        <li>這是原本的內(nèi)容</li>
    </ul>
</div>

我們對(duì)li元素使用after方法,插入一段新內(nèi)容:?這是新內(nèi)容?該結(jié)構(gòu)就會(huì)變成:

<div>
   <ul>
        <li>這是原本的內(nèi)容</li>這是新內(nèi)容
    </ul>
</div>

對(duì)li元素使用after()方法,可以理解為對(duì)它的父元素使用append方法。

如果插入的內(nèi)容是HTML標(biāo)簽,那么它會(huì)被正常的渲染(展示在頁(yè)面上)

與after()方法對(duì)應(yīng)地,有一個(gè)before()方法,可以用來(lái)在被選元素前插入內(nèi)容。 

如果對(duì)HTML的偽元素/偽類有所了解,實(shí)際上after方法的使用上與給偽元素/偽類設(shè)置content是一樣的。

appendTo()

appendTo()方法是一個(gè)往被選元素結(jié)尾插入元素的方法。注意,他是往一個(gè)元素的內(nèi)容結(jié)尾插入元素,所以插入的元素還在這個(gè)元素中。舉個(gè)例子,有如下HTML結(jié)構(gòu):

<div>
    <ul>
        <li>這是原本的內(nèi)容</li>
    </ul>
</div>

我們對(duì)li元素使用appendTo()方法,插入一段新內(nèi)容:?<p>這是新內(nèi)容</p>?該結(jié)構(gòu)就會(huì)變成:

<div>
    <ul>
        <li>這是原本的內(nèi)容<p>這是新內(nèi)容</p></li>    </ul>
</div>

注意:appendTo()方法與append()方法很相似,但有一定的區(qū)別,appendTo()方法插入的內(nèi)容必須是HTML標(biāo)簽,插入后就是一個(gè)元素,而append插入的只是文本,如果文本是HTML標(biāo)簽會(huì)被渲染。

  與appendTo()方法對(duì)應(yīng)地,有一個(gè)prependTo()方法,可以用來(lái)在被選元素的開頭插入元素。 

 insertAfter() 方法

after()方法是一個(gè)往被選元素后插入元素的方法。注意,他是往一個(gè)元素的后面插入元素,所以插入的元素不在這個(gè)元素中。

舉個(gè)例子,有如下HTML結(jié)構(gòu):

<div>
    <ul>
        <li>這是原本的內(nèi)容</li>
    </ul>
</div>

我們對(duì)li元素使用insertAfter方法,插入一段新內(nèi)容:?<p>這是新內(nèi)容</p>?該結(jié)構(gòu)就會(huì)變成:

<div>
   <ul>
        <li>這是原本的內(nèi)容</li><p>這是新內(nèi)容</p>
    </ul>
</div>

對(duì)li元素使用insertAfter()方法,可以理解為對(duì)它的父元素使用appendTo()方法。

注意:insertAfter()方法與after()方法很相似,但有一定的區(qū)別,insertAfter()方法插入的內(nèi)容必須是HTML標(biāo)簽,插入后就是一個(gè)元素,而after()插入的只是文本,如果文本是HTML標(biāo)簽會(huì)被渲染。

  與insertAfter()方法對(duì)應(yīng)地,有一個(gè)insertBrfore()方法,可以用來(lái)在被選元素前插入元素。 

總結(jié)

以上就是四種(八種)jQuery插入方法的區(qū)別,詳細(xì)的使用方法下附鏈接,小伙伴們可以前往相應(yīng)的手冊(cè)進(jìn)行查看。

append() 方法prepend()方法 

after() 方法/before()方法 

appendTo() 方法prependTo()方法 

insertAfter() 方法/insertBefore()方法 

0 人點(diǎn)贊