js动态循环添加li标签怎么做

var arrs="应用1,应用2,应用3,应用4,应用5,应用6,应用7,应用8,应用9"function ok(){ var ars=arrs.split(",")var html=""for(var i=0i

<meta charset="utf-8" />

<ul id="list">

<li><a href="#">钟点清洗</a></li>

<li><a href="#">开荒保洁</a></li>

<li><a href="#">家居保养</a></li>

</ul>

<script>

function CheckLI() {

var ObjLi = document.getElementById("list").getElementsByTagName("li")// list 是 ul 列表的 id

var Num = ObjLi.length//取得 ul 中 li 的个数

alert("本来有" + Num + "个产品")

if (Num <6) {//如果 li 的个数小于 6 个

var x = 6-Num//那么就算下需要添加多少个li

alert("JS将添加"+x+"个产品占位")

return AddLi(x)//把需要添加多少个 li 的数量传给用来添加 li 的另一个函数

}

}

function AddLi (m) {

alert("CheckLI函数检查到需添加"+m+"个产品")

for (var i = 0i<mi++) {

document.getElementById('list').innerHTML+='<li><a href="#" class="addli">家好网</a></li>'

}

}

window.onload = CheckLI//网页载入后开始执行 CheckLI 函数来检查和添加 li

</script>

<style>.addli{color: red}</style>

1.首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。

2.然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。

3.通过value属性我们可以获得用户在input中输入的内容，如下图所示。

4.下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。

5.创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。

6.接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。

7.最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。

---