day27 节点操作——增加节点

最新推荐文章于 2024-09-29 11:29:55 发布

亦昭昭

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量561

点赞数 13

分类专栏：记录前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/z240113765/article/details/135894671

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在JavaScript中通过DOM操作，包括createElement创建新节点，appendChild追加到父元素末尾，insertBefore插入到父元素指定位置，帮助开发者掌握在HTML页面上动态添加和管理元素的基本技巧。

摘要由CSDN通过智能技术生成

增加节点

引入：比如，点击发布按钮，新增一条信息
新增节点操作：
- 创建一个新的节点
- 把创建的新节点放入到指定的元素内部

创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：document.createElement('标签名')

示例：
在这里插入图片描述

<script>
        // 1.创建节点
        const div = document.createElement('div')
        console.log(div);

    </script>

追加节点

要在界面上显示，得插入到某个父元素中

插入到父元素的最后一个子元素：

父元素.appendChild(要插入的元素)

示例：
在这里插入图片描述

<body>

    <script>
        // 1.创建节点
        const div = document.createElement('div')
        console.log(div);
        document.body.appendChild(div)

    </script>
</body>

示例2：
在这里插入图片描述

<body>
    <ul>
        <li>
            我是第一个
        </li>
    </ul>
    <script>
        // 1.创建节点
        // const div = document.createElement('div')
        // console.log(div);
        // document.body.appendChild(div)
        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '是 li'
        ul.appendChild(li)
    </script>
</body>

插入到父元素中某个子元素的前面：

父元素.insertBefore(要插入的元素,在哪个元素前面)

在这里插入图片描述

<body>
    <ul>
        <li>
            我是第一个
        </li>
    </ul>
    <script>
        // 1.创建节点
        // const div = document.createElement('div')
        // console.log(div);
        // document.body.appendChild(div)
        const ul = document.querySelector('ul')
        const li = document.createElement('li')
        li.innerHTML = '是 li'
        // ul.appendChild(li)
        ul.insertBefore(li, ul.children[0])
    </script>
</body>