<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function addfn() {
var li = document.createElement("li");
li.innerText = i1.value;
myul.appendChild(li);
}
function insert() {
var li = document.createElement("li");
var i1 = document.getElementById("i1")
li.innerText = i1.value;
myul.insertBefore(li, 上海);
}
function del() {
var i1 = document.getElementById("i1");
var myul = document.getElementById("myul");
if (i1.value == "") {
alert("Please input something!");
} else {
var childNodes = myul.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--) {
if (childNodes[i] == i1.value) {
myul.removeChild(i1.value);
i1.value = null;
return;
}
}
i1.value = null;
alert("Not Found!");
}
}
</script>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="添加" onclick="addfn()">
<input type="button" value="插入" onclick="insert()">
<input type="button" value="删除" onclick="del()">
<hr>
<ul id="myul">
<li id="北京">北京</li>
<li id="上海">上海</li>
<li id="广州">广州</li>
</ul>
</body>
</html>
本人菜鸟刚学没多久，想请教一下大神们
插入功能怎么改成插入到第二个li前面
还有删除功能想根据id名删除却找不到
小弟上网找了半天还是没解决，求大神们帮帮忙...
// insert
function insert() {
var li = document.createElement("li");
var i1 = document.getElementById("i1")
li.innerText = i1.value;
var li2=document.getElementsByTagName("li");
myul.insertBefore(li, li2[1]);
}
// del
function del() {
var i1 = document.getElementById("i1");
var myul = document.getElementById("myul");
if (i1.value == "") {
alert("Please input something!");
} else {
var del_li=document.getElementById(i1.value);
if(del_li){
del_li.remove();
}else{
alert("Not Found!");
}
}
}
试试
<script type="text/javascript">
function addfn() {
var li = document.createElement("li");
li.innerText = i1.value;
li.id=i1.value;
if(document.getElementById(i1.value)){
alert("已存在")
}else{
myul.insertBefore(li,document.getElementById("上海"));
}
}
function del() {
var i1 = document.getElementById("i1");
var myul = document.getElementById("myul");
if (i1.value == "") {
alert("Please input something!");
} else {
if(document.getElementById(i1.value)){
document.getElementById(i1.value).remove();
}else{
alert("Not Found!");
}
}
}
</script>
你的代码有点杂乱，直接通过id名的方式读取值的我还是第一回见到，你想在第二个li元素前插入元素就应该先获取到这个元素，而不是固定的“上海”，另外删除功能childNodes你可以自己打印看看是不是你预想的三个li元素，事实上还有文本节点，另外节点对象和你通过input获取的值不可能相等，一个是节点对象一个是字符串
为何不用 jq 而是原生js呢
用jq吧，id不要起中文名