JS进阶DAY4|节点操作
嘿👋 今天我们要一起深入探索JavaScript中的DOM操作，这是前端开发中不可或缺的技能。🌟 准备好了吗？让我们一起跳进DOM的海洋，看看怎么用代码操控网页的结构吧！
目录
1.3 使用 insertAdjacentElement 方法
1. 增加节点
在DOM中增加节点就像是在一棵树上添加新的枝叶。我们有几种方法可以实现这一点。
1.1 使用 appendChild 方法
这是最基本的方法，用于将新节点添加到指定的父节点中。
// 创建一个新的元素节点
let newNode = document.createElement('div');
// 为新节点添加内容
newNode.innerHTML = 'Hello, DOM!';
// 获取要添加到的父节点
let parent = document.getElementById('parentElement');
// 将新节点添加到父节点中
parent.appendChild(newNode);1.2 使用 insertBefore 方法
如果你想要在一个已存在的节点前插入新节点，可以使用 insertBefore 方法。
// 创建一个新的元素节点
let newNode = document.createElement('div');
newNode.innerHTML = 'Before Existing Node';
// 获取要插入的参考节点
let referenceNode = document.getElementById('referenceElement');
// 获取父节点
let parent = referenceNode.parentNode;
// 在参考节点前插入新节点
parent.insertBefore(newNode, referenceNode);1.3 使用 insertAdjacentElement 方法
这个方法允许你将元素插入到另一个元素的前后或子元素之前。
// 创建一个新的元素节点
let newNode = document.createElement('div');
newNode.innerHTML = 'Adjacent Element';
// 获取要操作的元素
let parent = document.getElementById('parentElement');
// 在元素的末尾插入新节点
parent.insertAdjacentElement('beforeend', newNode);2. 删除节点
删除DOM中的节点就像是修剪枝叶，我们可以用 removeChild 方法来实现。
2.1 删除指定的节点
// 获取要删除的节点
let nodeToDelete = document.getElementById('nodeToDelete');
// 从DOM中移除节点
if (nodeToDelete.parentNode) {
nodeToDelete.parentNode.removeChild(nodeToDelete);
}3. 克隆节点
克隆DOM中的节点就像是复制一棵树的枝叶。我们可以用 cloneNode 方法来实现。
3.1 克隆一个节点
// 获取要克隆的节点
let nodeToClone = document.getElementById('nodeToClone');
// 克隆节点，deep参数为true表示克隆所有子节点
let clonedNode = nodeToClone.cloneNode(true);
// 为克隆的节点添加内容或修改属性
clonedNode.innerHTML = 'This is a cloned node';3.2 将克隆的节点添加到DOM中
// 获取要添加到的父节点
let parent = document.getElementById('parentElement');
// 将克隆的节点添加到父节点中
parent.appendChild(clonedNode);4. 删除克隆节点
删除克隆节点和删除普通节点的过程是一样的。
4.1 删除克隆的节点
// 获取要删除的克隆节点
let clonedNodeToDelete = document.getElementById('clonedNodeToDelete');
// 从DOM中移除克隆节点
if (clonedNodeToDelete.parentNode) {
clonedNodeToDelete.parentNode.removeChild(clonedNodeToDelete);
}好啦，我们今天的JavaScript DOM操作之旅就到这里啦！🚀 DOM操作是前端开发中非常基础且重要的技能，掌握它们可以让你在构建网页时更加得心应手。
如果你有任何疑问，或者想要更多地了解这个话题，随时欢迎留言哦！我们下次再见啦！👋
原文地址：https://blog.csdn.net/2301_80743865/article/details/144383299
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！