JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点-优快云博客

本文介绍了一种使用JavaScript动态创建HTML元素的方法，并通过具体示例展示了如何将新创建的元素添加到现有页面结构中。文章包含了一个具体的脚本实例，演示了如何创建一个新的列表项并将其插入到指定的列表中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>