<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oText = document.getElementById("text");
var oUl = document.getElementById("ul1");
//找到所有的li
var aLi = document.getElementsByTagName("li");
oBtn.onclick = function(){
var oLi = document.createElement("li");
oLi.innerHTML=oText.value;
// oUl.appendChild(oLi);
//inserBefore 有两个参数 一个是插入元素 第二个是在谁的前面插入
//类似微博
// oUl.insertBefore(oLi,aLi[0]);//这样写在ie中会报错 因为ie认为没有li
//兼容写法
if(aLi.length >0)
{
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi)
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="text" value=""/>
<input id="btn1" type="button" value="创建li" />
<ul id="ul1"></ul>
</body>
</html>
本文介绍了一种使用HTML和JavaScript结合的方式来自动生成并插入动态列表的方法。通过按钮点击事件，用户可以在页面上实时创建新的列表项，并选择将其放置的位置。
扫一扫
3312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
