JavaScript 创建元素

最新推荐文章于 2024-07-23 18:15:45 发布

ajaejpb2472710

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量170

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzyhx/p/11182232.html

版权

使用DOM动态创建元素，要经历以下3个步骤：

创建元素，调用方法 createElemnet()
设置内容，调用方法 createTextNode()

添加到DOM中，调用方法 appendChild() 示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>创建元素</title>
 6 </head>
 7 <body>
 8 
 9 <!--有序排列-->
10 <ol>
11     <li>鱼粉</li>
12     <li>炒粉</li>
13     <li>肠粉</li>
14 </ol>
15 
16 <!--无序排列-->
17 <ul id="ul">
18     <li>油条</li>
19     <li>包子</li>
20 </ul>
21 
22 <!--按钮-->
23 <button onclick="chuangjiangyuanshu()">创建元素</button>
24 
25 <script>
26     function chuangjiangyuanshu() {
27         var newel = document.createElement('li');         //  创建li元素       <li></li>
28       
29         var newtext = document.createTextNode("豆浆");   // 创建新文件节点      豆浆
30         
31         newel.appendChild(newtext);   //    将豆浆放到刚创建的元素中           <li> 豆浆 </li>
32         
33         var ul = document.getElementById('ul');  //获取id为"ul"的元素
34         
35         ul.appendChild(newel);    //将刚添加到li元素中的豆浆，再添加到ul元素中     <ul>  <li> 豆花 </li>   </ul>
36     }
37 </script>
38 </body>
39 </html>

转载于:https://www.cnblogs.com/hzyhx/p/11182232.html

ajaejpb2472710

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 创建元素

使用DOM动态创建元素，要经历以下3个步骤：创建元素，调用方法 createElemnet()设置内容，调用方法 createTextNode()添加到DOM中，调用方法 appendChild() ...
复制链接

扫一扫