js动态创建元素

动态创建元素有三种方法:

1. document.write();
2. element.innerHTML
3. document.createElement()

document.write()方法特点：
单词翻译：

语法	意思
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>