🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

7.5.2_添加和删除节点

在 DOM 中，提供了 node.appendChild() 和 node.insertBefore() 方法用于添加节点，node.removeChild(child) 用于删除节点。
接下来我们进行上述三种方法的使用讲解。

1. appendChild()

appendChild() 方法，将一个节点添加到指定父节点的子节点列表末尾，类似于 CSS 中的 after 伪元素。

2. insertBefore()

insertBefore (child,指定元素) 方法，将一个节点添加到父节点的指定子节点前面，类似于 CSS 中的 before 伪元素。

3. removeChild(child)

removeChild (child) 用于删除节点，该方法从 DOM 中删除一个子节点，返回删除的节点。

7.5.3_[ 案例 ] 简易留言板

案例：将利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击 “ 发布 ” 按钮动态创建一个 li，添加到 ul 里面。具体实现步骤如下。

(1) 编写 HTML 页面。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<textarea name="" id=""></textarea>
		<button>发布</button>
		<ul>
			</u1>
	</body>
</html>

在这里插入图片描述

上述代码中，定义了一个 textarea 多行文本输人框。供用户输入留言。
button 按钮用于单击发布留言。
ul 用于展示留言模块。

(2) 单击 “ 发布 ” 按钮，实现添加留言功能。

<script>
// 1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2.注册事件
btn.onclick = function() {
if (text.value = "") {
alert('您没有输人内容');
return false;
} else {
// (1) 创建元素
var li = document.createElement('li');
li.innerHTML = text.value;
// (2) 添加元素
ul.insertBefore(li, ul.children[0]);
}
};
</script>

上述代码中，第 7 行代码给 button 按钮添加单击事件，用于添加留言。第 8 ~ 11 行代码使用 if 条件语句进行判断，如果用户输入为空，提醒用户进行输人，否则执行 else 代码块。第 13、14 行代码创建元素 li 并给创建好的元素 li 进行赋值。第 16 行代码把创建好的 li 放到第一个元素的前面。

(3) 修改上述代码，实现删除留言功能。

要实现留言的删除，首先在添加 li 后时，就需要给 li 中增加一个 a 链接，给所有的 a 链接注册单击事件，找到 a 的父节点 li ，进行删除即可。

修改第 (2) 步中第 14 行的代码，改为如下代码。

li.innerHIML = text.value + '<a href="javascript:;">删除</a>';

在第( 2 )步第 16 行代码之后添加删除留言代码，如下所示。

var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode);
};
}

上述代码中，第 1 行代码获取所有的 a 元素。第 2 行代码利用 for 循环给 a 元素注册单击事件。第 4 行代码使用 node. removeChild(child) 方法删除当前 a 所在的 li 。

7.5.4_复制节点 node.cloneNode() 方法

在 DOM 中，提供了 node.cloneNode() 方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法为 “ 需要被复制的节点.cloneChild(true/false) " 。如果参数为空或 false ，则是浅拷贝，即只复制节点本身，不复制里面的子节点；如果括号参数为 true ，则是深拷贝，即会复制节点本身及里面所有的子节点。示例代码如下。

<body>
<ul id="myList"><li>苹果</li><li>橙子</li><li>橘子</li></u1>
<ul id="op"></ul>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var item = document.getElementById('mylist').firstChild;
var cloneItem = item.cloneNode (true);
document.getElementById('op').appendChild(cloneItem);
</script>
</body>

上述代码中，当单击 “ 点我 ” 按钮的时候，触发 myFunction() 函数，其中第 7 行代码获取 id 为 myList 列表中的第一个元素。第 8 行代码调用 cloneNode(true) 方法，复制第 7 行获取到的元素 item。第 9 行代码获取 id 为 op 的元素，并使用 appendChild() 方法将复制完成的 cloneItem 节点添加到 id 为 op 的元素中。

修改上述第 8 行代码，把 cloneNode(true) 的参数 true 改为 flse ，运行结果：

运行结果，当参数为 false 时只有一个空的 li 元素被复制。

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十）