动态创建元素有三种方法:
document.write();element.innerHTMLdocument.createElement()
document.write()方法特点：
单词翻译：
作用:document.write() 将一些文本直接写到页面中,页面文档运行完毕后，会导致它得重绘。通俗理解:创建一个新得文档界面
演示代码:
//当代码执行时,document.write()方法，会在最后显示document.write('我是最后一个被执行得');<div>我先被执行</div>return : 我先被执行我是最后一个被执行得//先执行文档流，文档流执行完毕，在执行document.write();
document.write('<div>我创建了一个新得元素</div>');//当给document.write添加事件时候，会创建一个新得界面<button>按钮</button><script>var btn = document.querySelector('button');btn.onclick = function() {document.write('我创建了一个新得文档界面');}</script>
element.innerHTML特点
作用:在指定元素中，添加新得节点
缺点:当添加过多节点时,添加节点时间很长
<script>document.body.innerHTML ='<div>增加新的节点</div>'//当我们创建很多个节点时，很费时间for(var i=0;i<=10000;1++) {document.body.innerHTML +='<div>增加新的节点</div>';}//我们可以用数组保存数据，innerHTML 拿出数据var arr =[];for (var i = 0; i <= 100; i++) {//push(属性)意思:向数组中添加新得数组下标 ，里面得参数时数组下标中得值arr.push('<a href="javascript:;">创建100个链接</a>');}//join 将数组中得值转换为字符串div.innerHTML = arr.join('');</script>
**docement.createElement()**特点
作用:在指定元素中，创建新得节点
优点:当创建很多个节点时,用的时间较少,代码简洁
演示代码:
<ul></ul><script>var ul = document.querySelector('ul');for (var i = 0; i <= 10000; i++) {var lis = document.createElement('li');ul.appendChild(lis);lis.innerHTML = '第' + i + '个标签';}</script>
