您好,登錄后才能下訂單哦!
javascript中如何添加元素,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
方法: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> }
效果圖:
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。