js动态创建li的不同方法

一、document.body.innerHTML+="<li></li>"

我们可以用document.body.innerHTML+="<li></li>"方法向body内添加li元素，但循环添加太耗性能，可以先循环将要添加的字符串预先连接后保存到str里，再一次性添加给body：document.body.innerHTML=str，这样可以避免添加数量过多时造成的页面刷新迟缓卡顿问题。

DOM中文档结构如下：

<ul></ul>

CSS中的样式如下：

*{
	margin:0;
	padding:0;
}
ul{
	margin:100px;;
}
ul li{
	list-style:none;
	width:100px;
	height:45px;
	border:1px #000 solid;
	background:#0FF;
}

JS中的样式如下：

var oUl = document.getElementsByTagName("ul")[0];
var str = "";
for(var i=0;i<5;i++){
	str+="<li></li>"
	}
oUl.innerHTML = str;

效果图如下：

二、（DOM元素操作）向父元素中动态创建元素

用innerHTML的累加的方式创建元素，但是添加若次数过多会使性能降低；

1. 创建一个li元素：var oLi = document.createElement("li");
2. 该元素被创建出来时并不属于页面，可以先给该元素添加内容，事件等：oLi.innerHTML = obj.value;
3. 把他放在其父元素中:（在父级最后节点后添加该元素）oUl.appendChild(oLi);

DOM中文档结构如下：

<ul></ul>

CSS中的样式如下：

*{
	margin:0;
	padding:0;
}
ul{
	margin:100px;;
}
ul li{
	list-style:none;
	width:100px;
	height:45px;
	border:1px #000 solid;
	background:#0FF;
}

JS中的样式如下：

for(var i=0;i<5;i++){
	var oLi = document.createElement("li");
	oLi.innerHTML = i;
	oUl.appendChild(oLi);
}

效果图如下：