动态创建:根据服务器返回的数据来进行创建,本身不知道创建的数量
实例:
最终效果 :
<body id="box">
<div>
<ul>
<li>
<a></a>
<span></span>
</li>
<li>
<a></a>
<span></span>
</li>
<li>
<a></a>
<span></span>
</li>
</ul>
</div>
</body>动态添加步骤:
1,给body添加id为box
2.js动态添加步骤
<script>
var oDiv_i = document.createElement("div");//动态创建div
oDiv_i.setAttribute("id","odiv_l");//给div添加id名
document.getElementById("box").appendChild(oDiv_i);//把div添加到body里
var oUl_i = document.createElement("ul");//动态创建ul
oUl_i.setAttribute("id","oUl_l");//给ul添加id名
document.getElementById("odiv_l").appendChild(oUl_i);//把ul添加到div里
function oLi(oi_a){//oi_a:动态添加不同li的id
var oLi_i = document.createElement("li");//动态添加li
oLi_i.setAttribute("id",oi_a);//给li添加id名
document.getElementById("oUl_l").appendChild(oLi_i);//把li添加到ul中
oA(oLi_i);//调用创建a标签的函数
oSpan(oLi_i);//调用创建span标签的函数
}
function oA(li){
var oA_i = document.createElement("a");//动态添加a
oA_i.setAttribute("id","oA_l");//给a添加id名
li.appendChild(oA_i);//把a添加到li中
}
function oSpan(li){
var oSpan_i = document.createElement("span");//动态添加span
oSpan_i.setAttribute("id","oSpan_l");//给span添加id名
li.appendChild(oSpan_i);//把span添加到li中
}
/*循环遍历,创建三个li*/
var ids=['id1','id2','id3']//创建数组,存放li的id
for(var i=0;i<ids.length;i++){//循环遍历
oLi(ids[i]);//调用li函数,并且把id分别传入三个li中
}
</script>
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
