<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function(){ var oD=document.getElementById("w"); var oBtn=document.getElementById("btn"); var oTxt=document.getElementById("txt"); oBtn.onclick=function(){ var oLi=document.createElement("li"); oLi.innerHTML=oTxt.value; if(oD.children.length>0){//children方法详见Jquery //新节点插入第一个节点前面 oD.insertBefore(oLi,oD.childNodes[0]); }else{ //最后一个子节点之后添加节点 oD.appendChild(oLi); } }; }; </script> </head> <body> <input type="text" id="txt" /> <input type="button" id="btn" value="添加" /> <div> <ul id="w"> </ul> </div> </body> </html>
原文：http://www.cnblogs.com/dream-w/p/4858911.html