這次帶給大家JS操作DOM插入節點,JS操作DOM插入節點的注意事項有哪些,下面就是實戰案例,一起來看一下。
一 介紹
插入節點透過使用insertBefore()方法來實作。
insertBefore()
方法將在另一個子節點前插入新的子節點。
obj.insertBefore(new,ref)
#new:表示新的子節點。
ref:指定一個節點,在這個節點前插入新的節點。
二套用
插入節點,本範例在頁面的文字方塊中輸入需要插入的文本,然後透過點擊「前插入”按鈕將文字插入頁面中。
三完整範例程式碼:
<!DOCTYPE html> <html> <head> <title>插入节点</title> <script language="javascript"> <!-- function crNode(str) { var newP=document.createElement("p"); var newTxt=document.createTextNode(str); newP.appendChild(newTxt); return newP; } function insetNode(nodeId,str) { var node=document.getElementById(nodeId); var newNode=crNode(str); if(node.parentNode) //判断是否拥有父节点 node.parentNode.insertBefore(newNode,node); } --> </script> </head> <body> <h2 id="h">在上面插入节点</h2> <form id="frm" name="frm"> 输入文本:<input type="text" name="txt" /> <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" /> </form> </body> </html>
#我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是JS操作DOM插入節點的詳細內容。更多資訊請關注PHP中文網其他相關文章!