DOM相信大家都见得多,这里介绍常见的操作。
0、createElement();创建
1、appendChild();追加节点
2、removeChild();删除
3、insertBefore(节点, 原有节点) 在已有元素前插入
createElement();创建:
appendChild();追加节点
用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; //父.appendChild(子节点) oUl.appendChild(oLi); } } </script> <input id="txt1" type="text" /> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body> </html>
removeChild();删除
用法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> window.onload = function(){ var oul = document.getElementById("ul1"); var oa = document.getElementsByTagName("a"); for( var i = 0; i< oa.length; i++){ oa[i].onclick = function(){ oul.removeChild(this.parentNode); } } }; </script> <ul id="ul1"> <li>啊啊<a href="javascript:;">删除</a></li> <li>啊啊啊啊<a href="javascript:;">删除</a></li> <li>啊啊啊啊<a href="javascript:;">删除</a></li> <li>啊啊啊啊<a href="javascript:;">删除</a></li> <li>啊啊啊啊<a href="javascript:;">删除</a></li> </ul> </body> </html>
insertBefore(节点, 原有节点) 在已有元素前插入
用法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> //父.insertBefore(子节点, 谁之前) window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; if(aLi.length==0) { oUl.appendChild(oLi); } else { //更改原来没有的li元素 oUl.insertBefore(oLi, aLi[0]); } } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> </ul> </body> </html>