1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 7 <script type="text/javascript"> 8 9 //新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点 10 window.onload = function(){ 11 alert(1); 12 13 //1. document.createElement(elementTagName) 14 //新创建一个元素节点, 返回值为指向元素节点的引用 15 //<li></li> 16 var liNode = document.createElement("li"); 17 18 //2. 创建 "厦门" 的文本节点 19 //document.createTextNode(string) 创建一个文本节点 20 //参数为文本值, 返回该文本节点的引用. 21 var xmText = document.createTextNode("厦门"); 22 //<li>厦门</li> 23 liNode.appendChild(xmText); 24 25 var cityNode = document.getElementById("city"); 26 //2. elementNode.appendChild(newChild): 为 elementNode 27 //新添加 newChild 子节点, 该子节点将作为 elementNode 的最后 28 //一个子节点. 29 cityNode.appendChild(liNode); 30 } 31 32 </script> 33 34 </head> 35 <body> 36 <p>你喜欢哪个城市?</p> 37 <ul id="city"><li id="bj" name="BeiJing">北京</li> 38 <li>上海</li> 39 <li>东京</li> 40 <li>首尔</li> 41 </ul> 42 43 <br><br> 44 <p>你喜欢哪款单机游戏?</p> 45 <ul id="game"> 46 <li id="rl">红警</li> 47 <li>实况</li> 48 <li>极品飞车</li> 49 <li>魔兽</li> 50 </ul> 51 52 <br><br> 53 gender: 54 <input type="radio" name="gender" value="male"/>Male 55 <input type="radio" name="gender" value="female"/>Female 56 57 <br><br> 58 name: <input type="text" name="username" value="atguigu"/> 59 60 </body> 61 </html>