JavaScript学习笔记—DOM：元素的添加、修改、删除

博客园 - 码农张3

Vue3 父组件引用子组件并控制子组件显隐及数据传递 MySQL创建用户且只能访问指定数据库表自定义跨字段校验必填注解 Element Plus SCSS 变量覆盖用法 leaflet-canvasmarker添加的marker旋转问题 SpringBoot项目控制台打印sql设置 Windows 远程桌面复制粘贴突然无效 SQLServerException: 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。右键用vscode打开文件夹 nodemon: 无法加载文件 C:\DevSoft\nodejs\node_global\nodemon.ps1 - 码农张3 EasyUI Datagrid添加右键导出菜单并导出数据个人所得税App住房贷款利息解读 JavaScript学习笔记—DOM：操作class JavaScript学习笔记—DOM：通过属性读取样式 SQLServer数据库导出指定表里所有数据成insert语句解决Mybatis xml文件中执行mysql语句时，语句后携带分号实现多语句执行报异常问题 JS去除字符串前面所有0 Redis启动服务报错：服务没有及时响应启动或者控制请求 JavaScript学习笔记—全选、取消、反选、提交 JavaScript学习笔记—DOM：事件 JavaScript学习笔记—DOM：属性节点

码农张3 · 2023-02-02 · via 博客园 - 码农张3

appendChild(node)：向节点添加最后一个子节点
insertAdjacentHTML(position, text)：把元素插入到指定位置
- position：
  - beforebegin - 插入到当前元素的前面，即开始标签之前
  - afterbegin - 作为当前元素的子元素，插入到所有子元素之前，即开始标签之后
  - beforeend - 作为当前元素的子元素，插入到所有子元素之后，即结束标签之前
  - afterend - 插入到当前元素的后面，即结束标签之后
- text：
  - 是要被解析为HTML或XML,并插入到DOM树中的字符串。
remove()：删除当前节点元素
replaceWith()：使用一个元素替换当前元素
具体位置：

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

实例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button id="btn01">按钮1</button>
        <button id="btn02">按钮2</button>
        <hr />
        <ul id="list">
            <li id="swk">孙悟空</li>
            <li id="zbj">猪八戒</li>
            <li id="shs">沙和尚</li>
        </ul>

        <script>
            /* 
                点击按钮后，向ul中添加一个唐僧
            */

            // 获取ul
            const list = document.getElementById("list");

            // 获取按钮
            const btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                // <li id="shs">沙和尚</li>
                // 创建一个li
                const li = document.createElement("li");
                // 向li中添加文本
                li.textContent = "唐僧";
                // 给li添加id属性
                li.id = "ts";

                // appendChild() 用于给一个节点添加子节点
                // list.appendChild(li)

                //insertAdjacentElement()可以向元素的任意位置添加元素
                //两个参数：1.要添加的位置 2.要添加的元素
                // beforeend 标签的最后 afterbegin 标签的开始
                // beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
                // list.insertAdjacentElement("afterend", li);

                list.insertAdjacentHTML("beforeend", "<li id='bgj'>白骨精</li>")

            }


            const btn02 = document.getElementById("btn02")
            btn02.onclick = function(){
                // 创建一个蜘蛛精替换孙悟空
                const li = document.createElement("li")
                li.textContent = "蜘蛛精"
                li.id = "zzj"

                // 获取swk
                const swk = document.getElementById("swk")

                // replaceWith() 使用一个元素替换当前元素
                // swk.replaceWith(li)

                // remove()方法用来删除当前元素
                swk.remove()

            }
        </script>
    </body>
</html>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - 码农张3