js双击插入nextsibling

最新推荐文章于 2024-04-14 14:00:27 发布

蜕变之痛

最新推荐文章于 2024-04-14 14:00:27 发布

阅读量310

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/liuxueyi521/article/details/52888442

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>双击插入</title>
    <style type="text/css">
        li{
            width:240px;
            list-style:none;
            height:20px;
            line-height:20px;
            font-size:12px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var cityNode = document.getElementById("city");
            var lis = cityNode.getElementsByTagName("li");
            for(var i = 0 ;i <cityNode.childElementCount;i++){
                lis[i].onclick=function(){
                    var newNode = document.createElement("li");
                    var d = new Date();
                    var his = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                    var textNode = document.createTextNode(this.textContent + "_" + his );
                    newNode.appendChild(textNode);
                    cityNode.insertBefore(newNode,this.previousSibling);
//                    cityNode.insertBefore(newNode,this.nextSibling);


                }
            }
        }       
    </script>
</head>
<body>
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>深圳</li>
    </ul>   
</body>
</html>