本篇內(nèi)容主要講解“javascript中添加元素的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中添加元素的方法”吧!

成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、高州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為高州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

方法：1、appendChild()方法在末尾插入新元素，語法“appendChild(newchild)”；2、insertBefore()方法，在開頭插入新元素，新語法“insertBefore(newchild,refchild)”。

在文檔中有兩種辦法插入新節(jié)點(diǎn)（元素），一種是在開頭插入，一種是在末尾插入。

appendChild()方法：在末尾插入新節(jié)點(diǎn)

JavaScript appendChild() 方法可向當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。用法如下：

appendChild(newchild)

參數(shù) newchild 表示新添加的節(jié)點(diǎn)對象，并返回新增的節(jié)點(diǎn)。

示例1

單擊按鈕創(chuàng)建并添加p標(biāo)簽

點(diǎn)我

效果圖：

如果文檔樹中已經(jīng)存在參數(shù)節(jié)點(diǎn)，則將從文檔樹中刪除，然后重新插入新的位置。如果添加的節(jié)點(diǎn)是 DocumentFragment 節(jié)點(diǎn)，則不會直接插入，而是把它的子節(jié)點(diǎn)插入當(dāng)前節(jié)點(diǎn)的末尾。

將元素添加到文檔樹中，瀏覽器會立即呈現(xiàn)該元素。此后，對這個元素所作的任何修改都會實(shí)時反映在瀏覽器中。

insertBefore()方法：在開頭插入新節(jié)點(diǎn)

JavaScript insertBefore() 方法可向當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)列表的開頭添加新的子節(jié)點(diǎn)。用法如下：

insertBefore(newchild, refchild)

其中參數(shù) newchild 表示新插入的節(jié)點(diǎn)，refchild 表示插入新節(jié)點(diǎn)的節(jié)點(diǎn)，用于指定插入節(jié)點(diǎn)的后面相鄰位置。插入成功后，該方法將返回新插入的子節(jié)點(diǎn)。

示例2

Coffee
Tea
單擊按鈕插入一個項(xiàng)目列表

點(diǎn)我




}

效果圖：

到此，相信大家對“javascript中添加元素的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！