点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

最新推荐文章于 2021-10-12 14:58:55 发布

ducode

最新推荐文章于 2021-10-12 14:58:55 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinchun/p/3446001.html

版权

效果：

代码：

<head runat="server">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var oul = document.getElementById('ull');
            var obtn = document.getElementById('btn');
            var ot1 = document.getElementById('t1');
            var obtnRemove = document.getElementById('btn1');
            obtn.onclick = function () {
                var oli = document.createElement('li');
                var ali = oul.getElementsByTagName('li');
                if (ali.length > 0) {
                    oul.insertBefore(oli, ali[0]);
                }
                else {
                    oul.appendChild(oli);
                }
                oli.innerHTML = ot1.value;

                //删除
                obtnRemove.onclick = function () {
                    for (var i = 0; i < ali.length; i++) {
                        oul.removeChild(ali[0]);
                    }
                }
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="t1" />
        <input type="button" id="btn" value="添加元素">
        <input type="button" id="btn1" value="删除元素">
        <ul id="ull">
        </ul>
    </div>
    </form>
</body>