js在末尾添加节点

最新推荐文章于 2022-10-09 17:38:21 发布

独挽离人

最新推荐文章于 2022-10-09 17:38:21 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/StriveE2/article/details/81294614

版权

JavaWeb 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

案例

在ul标签下添加li标签

效果是这样子

原理如下

整个HTML是一个树形结构，我只画出需要的部分

所以步骤如下

下面是代码

<!DOCTYPE html>
<html>

<head>
    <title>在末尾添加节点</title>
</head>

<body>
    <ul id="ulid">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>

    <!--换行-->
    <br />

    <input type="button" value="add" onclick="add1();" />
    <script type="text/javascript">
        //在末尾添加节点方法
        function add1() {
            //获取到ul标签
            var ul1 = document.getElementById("ulid");
            //创建标签
            var li1 = document.createElement("li");
            //创建文本
            var text1 = document.createTextNode("4444");
            //将文本加入到li下面
            li1.appendChild(text1);
            //将li加入到ul1下面
            ul1.appendChild(li1);
        }
    </script>
</body>

</html>