原生JS实现动态添加新元素的方法
在HTML中，我们可以通过JavaScript来动态添加、删除元素。下面是实现动态添加新元素的方法：
1. 创建新元素
要创建一个新元素，我们需要使用 createElement() 方法。它需要一个参数，即我们要创建的元素的名称。
let newElement = document.createElement('div');
这行代码将创建一个 div 元素并赋值给变量 newElement。
2. 添加内容
可以使用 innerHTML 属性来设置新元素的内容。
newElement.innerHTML = '这是一个新的 div 元素';
3. 设置属性
可以使用 setAttribute() 方法设置新元素的属性和值。
newElement.setAttribute('class', 'new-div');
这行代码将把新元素的 class 属性设置为 'new-div'。
4. 添加到文档中
使用 appendChild() 方法将新元素添加到文档中。
document.body.appendChild(newElement);
这行代码将把新元素添加到文档的 <body> 元素中。
示例
下面的代码将创建一个新的 button 元素，并将它添加到文档的 <body> 元素中。
let newButton = document.createElement('button');
newButton.innerHTML = '点击我';
newButton.setAttribute('class', 'new-button');
document.body.appendChild(newButton);
原生JS实现删除元素的方法
要删除元素，我们可以使用 removeChild() 方法。下面是实现删除元素的方法：
1. 获取要删除的元素
首先，我们需要获取要删除的元素。可以使用 getElementById() 或 querySelector() 来获取元素。
let elementToRemove = document.getElementById('myDiv');
2. 获取元素的父元素
然后，我们需要获取要删除元素的父元素。可以使用 parentNode 属性获取元素的父元素。
let parentElement = elementToRemove.parentNode;
3. 删除元素
使用 removeChild() 方法从父元素中删除要删除的元素。
parentElement.removeChild(elementToRemove);
示例
下面的代码将删除文档中的 <div id="myDiv"> 元素。
let elementToRemove = document.getElementById('myDiv');
let parentElement = elementToRemove.parentNode;
parentElement.removeChild(elementToRemove);
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现动态添加新元素、删除元素方法 - Python技术站
微信扫一扫 
支付宝扫一扫 