createElement创建元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="txt1"> <input type="button" value="创建1i" id="btn1"> <ul id="uli"> <li></li> </ul> </body> <script> var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('uli'); var oTxt=document.getElementById('txt1'); oBtn.οnclick=function () { var oLi=document.createElement("li"); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; //父级.appendChild(子节点) // oUl.appendChild(oLi); // 父级.insertBefore(子节点,在谁之前) // IE不支持 // oUl.insertBefore(oLi,aLi[0]); // 任何浏览器都支持的写法 if (aLi.length>0) { oUl.insertBefore(oLi,aLi[0]); }else{ oUl.appendChild(oLi); } } </script> </html>
removeChild删除元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ull"> <li>aaaaaa<a href="javascript:;">删除</a></li> <li>bbbbbb<a href="javascript:;">删除</a></li> <li>cccccc<a href="javascript:;">删除</a></li> <li>dddddd<a href="javascript:;">删除</a></li> <li>eeeeee<a href="javascript:;">删除</a></li> <li>ffffff<a href="javascript:;">删除</a></li> </ul> </body> <script> var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ull'); for (var i=0;i<aA.length;i++){ aA[i].οnclick=function () { oUl.removeChild(this.parentNode);//调出ul,删除li } } </script> </html>