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

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>

posted @ 2023-02-02 22:16 程序员张3 阅读(554) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript学习笔记—DOM之元素节点

· JavaScript学习笔记—DOM：文本节点

· JavaScript 学习-34.HTML DOM 创建/插入/删除/替换元素

· 【JavaScript36】HTML DOM创建/插入/删除/替换元素

· 阮一峰JavaScript教程(下1)

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

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

公告

搜索

常用链接

我的标签

随笔分类 (92)

	<!-- 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>