标签:
1.创建一个节点,用creatElement(TagName)
appendChild 是添加子节点。用法是 父级.appendChild(子节点);
2.插入用insertBefore
用法 父级.insertBefore(子节点,在谁之前)。 我犯得错误是没有把创建的li获取出来,直接写的oLi[0],要知道oLi并不是一个数组。他仅仅是一个变量。
oBtn.onclick = function (){
var oLi = document.createElement(‘li‘);
// oUl.appendChild(oLi);
oLi.innerHTML = oTxt.value;
oUl.insertBefore(oLi,oLi[0]); 错误示范
};
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <input id="txt" type="text" /> <input id="btn" type="button"/> <ul id="ull"></ul> <script> var oBtn = document.getElementById(‘btn‘); var oUl = document.getElementById(‘ull‘); var oTxt = document.getElementById(‘txt‘); var aLi = document.getElementsByTagName(‘li‘); oBtn.onclick = function (){ var oLi = document.createElement(‘li‘); // oUl.appendChild(oLi); oLi.innerHTML = oTxt.value; if(aLi.length>0) { oUl.insertBefore(oLi,aLi[0]); } else { oUl.appendChild(oLi); } }; </script> </body> </html>
删除子节点 用法 父级.removeChild(子节点)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <ul id="ull"> <li>egdf<a href="javascript:">删除</a></li> <li>bnfgd<a href="javascript:">删除</a></li> <li>qr43<a href="javascript:">删除</a></li> <li>rgs<a href="javascript:">删除</a></li> <li>shdy<a href="javascript:">删除</a></li> </ul> <script> var oUl = document.getElementById(‘ull‘); var aA = document.getElementsByTagName(‘a‘); for(var i=0;i<aA.length;i++) { aA[i].onclick = function () { oUl.removeChild(this.parentNode); } } </script> </body> </html>
标签:
原文地址:http://www.cnblogs.com/zhuni/p/4711005.html