动态地创建和删除元素是网页可交互性的基础，也是JavaScript编程中的重要部分。创建元素，可以在指定的位置插入新的元素、编辑和更新页面内容，而删除元素，可以清除页面上不需要的部分，使页面更加简洁美观。下面来详细讲解动态创建元素和删除元素的攻略。
动态创建一个元素 createElement
创建一个元素，首先需要使用createElement()方法创建一个内容为空的元素节点，然后使用appendChild()等方法将它添加到DOM中的指定位置。下面是一个创建h1标签的示例代码：
// 1. 创建一个 h1 元素
const h1= document.createElement('h1');
// 2. 设置 h1 元素的文本内容
h1.innerHTML = 'Hello, World!';
// 3. 将 h1 元素添加到文档的 body 元素中
document.body.appendChild(h1);
解析：
- 调用document.createElement方法创建一个空的
元素。
- 使用innerHTML属性设置
元素的文本内容为“Hello, World!”。
- 使用appendChild方法将
元素添加到文档的body元素中。
此时，打开页面，就可以看到输出“Hello, World!”的
元素了。同样的方式，我们也可以创建其他元素，例如：
、
等等。
下面看一个更加复杂的例子：
// 1. 创建一个 div 元素
const div = document.createElement('div');
// 2. 创建一个 h1 元素
const h1 = document.createElement('h1');
// 3. 设置 h1 元素的文本内容
h1.innerHTML = 'Hello, World!';
// 4. 将 h1 元素添加到 div 元素中
div.appendChild(h1);
// 5. 创建一个 p 元素
const p = document.createElement('p');
// 6. 设置 p 元素的文本内容
p.innerHTML = 'Hello, JavaScript!';
// 7. 将 p 元素添加到 div 元素中
div.appendChild(p);
// 8. 将 div 元素添加到文档的 body 元素中
document.body.appendChild(div);
解析：
同样，这个例子首先创建了一个空的
元素，然后在其中创建了一个
元素和一个
元素，分别设置它们的文本内容，最后将两个子元素都添加到
元素中。最终，将
元素添加到文档的body元素中。
删除一个元素
删除元素，需要获取到该元素的引用，然后使用removeChild()方法从它的父节点中移除。下面是一个简单的删除元素的示例：
// 获取要删除的元素
const div = document.getElementById('myDiv');
// 获取该元素的父元素
const parent = div.parentNode;
// 从父元素中删除该元素
parent.removeChild(div);
解析：
这个例子首先获取到了id为“myDiv”的元素的引用，然后获取该元素的父元素的引用，最后使用removeChild()方法将该元素从父元素中删除。
下面看一个更加复杂的例子，它实现了当用户单击元素时自动删除该元素的功能：
// 获取所有的要删除的元素
const items = document.querySelectorAll('.item');
// 为每个要删除的元素添加单击事件处理函数
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 单击事件处理函数
item.onclick = function() {
// 获取该元素的父元素
const parent = this.parentNode;
// 从父元素中删除该元素
parent.removeChild(this);
};
}
解析：
这个例子首先获取了页面中所有class为“item”的元素的引用，然后为每个元素添加一个单击事件处理函数。当用户单击一个元素时，该元素的引用就会被传入事件处理函数中，该处理函数将从该元素的父元素中将该元素删除。
以上是动态创建元素及删除元素的攻略，希望对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：动态的创建一个元素createElement及删除一个元素 - Python技术站
赞 (0)
微信扫一扫 
支付宝扫一扫
JavaScript如何删除对象的某个属性详析
上一篇
2023年6月10日
初学js插入节点appendChild insertBefore使用方法
下一篇
2023年6月10日
合作推广
分享本页
返回顶部