Dom动态添加删除元素

最新推荐文章于 2025-06-16 21:16:25 发布

青木郎

最新推荐文章于 2025-06-16 21:16:25 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html5 文章标签： dom 动态操作元素

本文链接：https://blog.youkuaiyun.com/qingmulang/article/details/53185445

Html5 专栏收录该内容

7 篇文章

订阅专栏

创建元素

var oLi = document.createElement("li");

createElement的参数是我们要创建的元素标签的名字。

添加元素

在尾部插入元素

oUl.appendChild(oLi);

父标签.appendChild（子标签）;

在指定位置插入元素

oUl.insertBefore(oLi, aLi[1]);

insertBefore有两个参数，第一个参数是我们要插入的元素，第二个参数是插入的位置，这里是插入在第一个元素之后，第二个元素之前，

删除元素

var oLi = aLi[aLi.length - 1];
oUl.removeChild(oLi);

父元素.removeChild(子元素)。很简单！

使用documentFragment来一次性添加多个子元素

documenFragment,有的地方也叫作’文档碎片’，他的作用减少页面不停重绘，不停渲染页面的过程。简单点说，就是将要添加的一组元素先放在documentFragment中，再将documentFragment添加到父控件中，这样整个页面只需要绘制渲染一次就行了。其实这种做法在ie8以前的版本上表现的比较明显，在ie9以及chrome和firefox上已经没有什么效果了，甚至降低性能，现在已经基本不使用了。具体使用：

var oDocumentFeagment = document.createDocumentFragment();//创建documenFragment
...
//添加文档碎片
for(var i = 0; i < 10; i++) {
        var oLi = document.createElement("li");
        oLi.innerHTML = (aLi.length + i) + "--" + (aLi.length + i);
        oDocumentFeagment.appendChild(oLi);
    }
oUl.appendChild(oDocumentFeagment);

这样就是将10个li一次性的添加到了ul中。

这里有一个简单例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Dom基本应用</title>
        <script type="text/javascript">
            window.onload = function() {
                var aInput = document.getElementsByClassName("option");
                var ahaha = document.getElementsByName("haha");
                var oUl = document.getElementById("ul");
                var aLi = oUl.getElementsByTagName("li");
                var oTextInput = document.getElementById("text");
                var oDocumentFeagment = document.createDocumentFragment();
                //              alert(ahaha.length);
                aInput[0].onclick = function() {
                    var oLi = document.createElement("li");
                    oLi.innerHTML = oTextInput.value;
                    oUl.appendChild(oLi);
                }
                aInput[1].onclick = function() {
                    var oLi = document.createElement("li");
                    oLi.innerHTML = oTextInput.value;
                    if(aLi.length > 0) {
                        oUl.insertBefore(oLi, aLi[1]);
                    } else {
                        oUl.appendChild(oLi);
                    }
                }
                aInput[2].onclick = function() {
                    var oLi = aLi[0];
                    oUl.removeChild(oLi);
                }
                aInput[3].onclick = function() {
                    var oLi = aLi[aLi.length - 1];
                    oUl.removeChild(oLi);
                }
                aInput[4].onclick = function() {
                    //添加文档碎片
                    for(var i = 0; i < 10; i++) {
                        var oLi = document.createElement("li");
                        oLi.innerHTML = (aLi.length + i) + "--" + (aLi.length + i);
                        oDocumentFeagment.appendChild(oLi);
                    }
                    oUl.appendChild(oDocumentFeagment);
                }
            }
        </script>
    </head>

    <body>
        <div>
            <input type="text" id="text" />
        </div>
        <input type="button" value="添加li" class="option" name="haha" />
        <input type="button" value="头部添加li" class="option" />
        <input type="button" value="头部删除li" class="option" />
        <input type="button" value="尾部删除li" class="option" />
        <input type="button" value="一次性添加10个子元素" class="option" />
        <ul id="ul"></ul>
    </body>

</html>

界面效果：

这里写图片描述