使用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>