愛彈吉他的小盆友
2019-05-28 11:16
采纳率: 100%
浏览 370
已结题

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条回答 默认 最新

  • Langnang 2019-05-28 11:36
    已采纳
    // 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!");
                    }
            }
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 听楼一夜雨 2019-05-28 11:35

    试试

        <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>
    
    评论
    解决 无用
    打赏 举报
  • csdn_wpno1 2019-05-28 11:36

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

    评论
    解决 无用
    打赏 举报
  • lllomh 2019-05-28 13:31

    为何不用 jq 而是原生js呢

    评论
    解决 无用
    打赏 举报
  • HF- 2019-05-28 15:05

    用jq吧,id不要起中文名

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题