创建，添加，插入和删除DOM元素

最新推荐文章于 2024-03-09 14:57:39 发布

半醉看夕阳

最新推荐文章于 2024-03-09 14:57:39 发布

阅读量1.5k

点赞数

分类专栏： Javascript 文章标签：创建添加插入删除DOM元素

本文链接：https://blog.csdn.net/bbb695480667/article/details/38299063

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建DOM元素：createElement("节点");

添加DOM元素：父级.appendChild(节点);

插入DOM元素：父级.insertBefore(节点, 要插入的位置);

删除DOM元素：oul.removeChild(节点);

下面通过两个实例来简单实用下这些方法：

1：向ul中插入li，并且每次新插入的li都在上面。为了区别开那些事新创建的li，可以在上面再添加一个文本框，里面输入一些内容，在点击创建节点的按钮，新创建的li中会出现在ul中，并且会显示文本框中输入的内容；

代码如下：

JavaScript代码：

    <script type="text/javascript">
        window.onload = function () {
            var oul = document.getElementById("ul1");
            var obtn = document.getElementById("btn_submit");
            var otxt = document.getElementById("txt_content");
            var oli = oul.getElementsByTagName("li"); //获取指定ul下的li，其目的在于后面的插入判断

            obtn.onclick = function () {
                var li = document.createElement("li");

                if (oli.length > 0)                   //如果指定的ul中存在li，则我们可以在第1个li之前插入li
                    oul.insertBefore(li, oli[0]);
                else                                  //如果没有li，则我们直接添加进去一个li
                    oul.appendChild(li);
                li.innerHTML = otxt.value;            //利用innerHTML往新创建的li里面添加内容
            };
        };
    </script>

HTMl代码：

<body>
    <input id="txt_content" type="text" />
    <input type="button" id="btn_submit" value="创建节点" />
    <ul id="ul1"></ul>
</body>

2：利用removechild删除超链接；

其代码如下：

javaScript代码：

    <script type="text/javascript">
        window.onload = function () {
            var oul = document.getElementById("ul1");
            var oa = document.getElementsByTagName("a");

            for (var i = 0; i < oa.length; i++) {
                oa[i].onclick = function () {
                    oul.removeChild(this.parentElement);
                };
            }
        };
    </script>

HTML代码：

<body>
    <ul id="ul1">
        <li><a href="javascript:;">删除</a></li>  
        <li><a href="javascript:;">删除</a></li>
        <li><a href="javascript:;">删除</a></li>
        <li><a href="javascript:;">删除</a></li>
        <li><a href="javascript:;">删除</a></li>
    </ul>
</body>