JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点

 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>    

 

你可能感兴趣的:(js)