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>