JS菜鸟发问,求大神....
<!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名删除却找不到
小弟上网找了半天还是没解决,求大神们帮帮忙...

5个回答

试试

    <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>
// 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!");
                }
        }
}

你的代码有点杂乱,直接通过id名的方式读取值的我还是第一回见到,你想在第二个li元素前插入元素就应该先获取到这个元素,而不是固定的“上海”,另外删除功能childNodes你可以自己打印看看是不是你预想的三个li元素,事实上还有文本节点,另外节点对象和你通过input获取的值不可能相等,一个是节点对象一个是字符串

为何不用 jq 而是原生js呢

用jq吧,id不要起中文名

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问