<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script> window.onload=function(){ var oUl=document.getElementById("ul"); var oBtn=document.getElementById("btn1"); var oTxt=document.getElementById("txt1"); var oLi=oUl.getElementsByTagName('li'); oBtn.onclick=function(){ var oA=document.createElement('li'); oA.innerHTML=oTxt.value; if(oLi.length>0){ oUl.insertBefore(oA,oLi[0]); }else{ oUl.appendChild(oA); } } } </script> </head> <body> <h2>创建DOM元素</h2> <input type="text" id="txt1"> <input type="button" value="创建" id="btn1"> <ul id="ul"></ul> </body> </html>