一、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的累加的方式创建元素,但是添加若次数过多会使性能降低;
- 创建一个li元素:var oLi = document.createElement("li");
- 该元素被创建出来时并不属于页面,可以先给该元素添加内容,事件等:oLi.innerHTML = obj.value;
- 把他放在其父元素中:(在父级最后节点后添加该元素)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); }
效果图如下: