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>

查看全文

相关阅读:
变量定义方法
 动态编译
 函数
 过程
 触发器
 高级聚合函数rollup(),cube(),grouping sets()
高级函数-decode
高级函数-sign
js 保留两位小数 javascript
js 发红包

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