您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“javascript中添加元素的方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“javascript中添加元素的方法”吧!
方法:1、appendChild()方法在末尾插入新元素,語法“appendChild(newchild)”;2、insertBefore()方法,在開頭插入新元素,新語法“insertBefore(newchild,refchild)”。
在文檔中有兩種辦法插入新節(jié)點(元素),一種是在開頭插入,一種是在末尾插入。
appendChild()方法:在末尾插入新節(jié)點
JavaScript appendChild() 方法可向當(dāng)前節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點。用法如下:
appendChild(newchild)
參數(shù) newchild 表示新添加的節(jié)點對象,并返回新增的節(jié)點。
示例1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="demo">單擊按鈕創(chuàng)建并添加p標(biāo)簽</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){ var p=document.createElement("p"); var t=document.createTextNode("新添的p標(biāo)簽"); p.appendChild(t); document.body.appendChild(p); }; </script> </body> </html>
效果圖:
如果文檔樹中已經(jīng)存在參數(shù)節(jié)點,則將從文檔樹中刪除,然后重新插入新的位置。如果添加的節(jié)點是 DocumentFragment 節(jié)點,則不會直接插入,而是把它的子節(jié)點插入當(dāng)前節(jié)點的末尾。
將元素添加到文檔樹中,瀏覽器會立即呈現(xiàn)該元素。此后,對這個元素所作的任何修改都會實時反映在瀏覽器中。
insertBefore()方法:在開頭插入新節(jié)點
JavaScript insertBefore() 方法可向當(dāng)前節(jié)點的子節(jié)點列表的開頭添加新的子節(jié)點。用法如下:
insertBefore(newchild, refchild)
其中參數(shù) newchild 表示新插入的節(jié)點,refchild 表示插入新節(jié)點的節(jié)點,用于指定插入節(jié)點的后面相鄰位置。插入成功后,該方法將返回新插入的子節(jié)點。
示例2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">單擊按鈕插入一個項目列表</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){ var newItem=document.createElement("LI") var textnode=document.createTextNode("Water") newItem.appendChild(textnode) var list=document.getElementById("myList") list.insertBefore(newItem,list.childNodes[0]); } </script> </body> </html> }
效果圖:
到此,相信大家對“javascript中添加元素的方法”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。