JavaScript 操作DOM 節點
阿新 • • 發佈:2017-10-10
cnblogs -1 操作dom -- append com 技術分享 節點 doctype
1、添加DOM節點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button onclick="func()">增加DOM節點</button> <script type="text/javascript"> var n=5; function func(){ var li=document.createElement("li"); var nodeText=document.createTextNode(n); li.appendChild(nodeText); var parent=document.getElementById("parent"); parent.appendChild(li); n++; } </script> </body> </html>
項目結果:
2、刪除DOM節點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <ul id="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button onclick="func()">增加DOM節點</button> <button onclick="func2()">刪除DOM節點</button> <script type="text/javascript"> var n=5; function func(){ var li=document.createElement("li"); var nodeText=document.createTextNode(n); li.appendChild(nodeText); var parent=document.getElementById("parent"); parent.appendChild(li); n++; } function func2(){ var parent=document.getElementById("parent"); var lis=document.getElementsByTagName("li"); var len=lis.length; parent.removeChild(lis[len-1]); n--; } </script> </body> </html>
項目結果:
3、修改DOM節點
JavaScript 操作DOM 節點