js 创建元素(用 JavaScript 动态添加元素)

JavaScript动态添加元素

在前端开发中，有时需要动态向页面中添加元素，比如根据用户的选择或者操作，在页面中添加一些新的元素或者删除一些不需要的元素等等。这时，我们可以使用JavaScript来实现动态添加和删除元素的功能。

使用JavaScript创建元素

使用JavaScript创建元素非常简单，我们可以使用document.createElement()方法来创建一个新的元素，然后使用appendChild()方法将它添加到指定的位置。

// 创建一个新的div元素
var newDiv = document.createElement('div');
// 将div元素添加到body中
document.body.appendChild(newDiv);

在上面的例子中，我们首先使用createElement()方法创建了一个新的div元素，然后使用appendChild()方法将它添加到body元素中。这样，页面中就会出现一个新的div元素。

向元素中添加文本内容

创建元素之后，我们还可以向元素中添加文本内容。使用textContent或者innerHTML属性来设置元素中的文本内容。

// 创建一个新的p元素
var newP = document.createElement('p');
// 设置p元素中的文本内容
newP.textContent = '这是一个新的段落';
// 将p元素添加到body中
document.body.appendChild(newP);

在上面的例子中，我们首先使用createElement()方法创建了一个新的p元素，然后使用textContent属性设置了p元素中的文本内容，最后使用appendChild()方法将它添加到body元素中。这样，页面中就会出现一个新的段落。

修改元素中的属性值

除了添加文本内容之外，我们还可以修改元素中的属性值。使用setAttribute()方法来设置属性值。

// 创建一个新的img元素
var newImg = document.createElement('img');
// 设置img元素中的src属性
newImg.setAttribute('src', 'image.png');
// 将img元素添加到body中
document.body.appendChild(newImg);

在上面的例子中，我们首先使用createElement()方法创建了一个新的img元素，然后使用setAttribute()方法设置了img元素中的src属性，最后使用appendChild()方法将它添加到body元素中。这样，页面中就会出现一张新的图片。

删除元素

有时，我们需要从页面中删除一些元素。使用removeChild()方法可以将指定的元素从文档中删除。

// 获取要删除的元素
var element = document.getElementById('element-to-delete');
// 删除指定的元素
element.parentNode.removeChild(element);

在上面的例子中，我们首先使用getElementById()方法获取了要删除的元素，然后使用parentNode和removeChild()方法将它从文档中删除。

结语

JavaScript动态添加元素可以帮助我们动态地向页面中添加或者删除元素，增强交互性和用户体验。掌握动态添加元素的技巧，可以使我们在前端开发中更加得心应手。