1. 创建新元素
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; oUl.insertBefore(oLi, aLi[0]);//添加元素至aLi[0]前 //oUl.appendChild(oLi);//此行作用添加元素至最后 }; }; </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="button" value="创建li"/> <ul id="ul1"> </ul> </body> </html> 复制元素 cloneNode <!DOCTYPE html> <html> <meta charset="utf-8"> <body> <ul id="myList1"><li>Coffee</li><li>Tea</li></ul> <ul id="myList2"><li>Water</li><li>Milk</li></ul> <p id="demo">请点击按钮把项目从一个列表复制到另一个列表中。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var oul=document.getElementById("myList1") var lis=oul.getElementsByTagName('li'); var itm=document.getElementById("myList2").lastChild; var cln=itm.cloneNode(true); //alert(lis[0].innerHTML); //document.getElementById("myList1").appendChild(cln);//复制在myList1最后 document.getElementById("myList1").insertBefore(cln,lis[0]);//复制在指定位置之前 } </script> </body> </html>请尝试把 参数cloneNode设置为 false将仅仅克隆空的 LI 元素
