zoukankan html css js c++ java

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

效果：

代码：

<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>

查看全文

相关阅读:
添加coreseek中文分词
 linux 常用处理命令
 rewrite nginx
判断浏览器类型
 Cookie 读写类
 Php 异常处理 exception
C++实验：时间和日期类
 数据结构：删除链表元素
 数据结构-循环单链表
 TOJ-5395 大于中值的边界元素

原文地址：https://www.cnblogs.com/xinchun/p/3446001.html