在ul中添加li

時間 2019-11-18

標籤添加简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*input,li,ul,a{margin: 0; padding: 0;}若是刪掉這句話，li的點會出現*/
     #ul li{float:left;clear:left;position: relative;width: auto;padding-right: 12px;padding-top: 10px;}
     #ul i{position: absolute;right: 0;top: 0;color: #f00;cursor: pointer;}
    </style>
</head>
<body>
    <input   id="text" type="text" value="" /><br/>
    <input id="btn" type="button" value="在ul中插入新內容"/>
    <ul id="ul">
        <!--<span>dfhl</span><i></i>-->
    </ul>
</body>
<script>
    var textObj=document.getElementById("text");
    var btnObj=document.getElementById("btn");
    var ulObj=document.getElementById("ul");
    btnObj.onclick= function () {//點擊按鈕
        var val=textObj.value;
        var spanObj=ulObj.getElementsByTagName("span");
            for(var i=0;i<spanObj.length;i++){
                if(spanObj[i].innerHTML==val)
                {alert("輸入重複");
                return;}//強制跳出函數，並返回一個結果
            }

        var liNode=document.createElement("li");
        liNode.innerHTML="<span>"+val+"</span><i>x</i>";
        ulObj.appendChild(liNode);
        textObj.value="";
    };
    ulObj.onclick=function(e){
        var event=e || window.event;
        var target=event.target || event.srcElement;
            if(target.nodeName=="I"){//此處應大寫
                target.parentNode.parentNode.removeChild(target.parentNode);//target是一個對象

        }
    }



</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。