如何使用JavaScript向div追加数据？

在前端开发中，我们经常需要通过JavaScript向一个HTML元素中追加数据。本文将介绍如何使用JavaScript向一个div元素中动态添加内容。

1. 使用innerHTML属性

innerHTML是一个常用的属性，它可以获取或设置一个元素的HTML内容。要向一个div元素中追加数据，我们可以使用以下代码：

const divElement = document.querySelector('#myDiv');
divElement.innerHTML += '追加的内容';

上面的代码首先获取了一个id为myDiv的div元素，然后将其innerHTML属性的值与新的内容字符串拼接，从而实现向该div元素中追加内容。

需要注意的是，使用innerHTML属性会替换掉该元素原有的所有子节点，因此如果想保留原有内容，需要在innerHTML属性的值中同时包含原有内容和新的内容。

2. 使用appendChild方法

另外一种向div元素中追加数据的方法是使用appendChild方法。该方法可以将一个新的DOM节点添加到指定元素的子节点列表的末尾。以下代码展示了如何使用appendChild方法向div元素中追加一个新的p元素：

const divElement = document.querySelector('#myDiv');
const newPElem = document.createElement('p');
newPElem.textContent = '追加的内容';
divElement.appendChild(newPElem);

上述代码首先创建了一个新的p元素，并将其文本内容设置为需要追加的数据。然后通过调用appendChild方法，将新创建的p元素添加到id为myDiv的div元素的子节点列表的末尾。

与使用innerHTML不同，使用appendChild方法可以保留原有的子节点，而只是向其末尾添加一个新的子节点。

总结

本文介绍了两种向div元素中追加数据的方法：使用innerHTML属性和使用appendChild方法。其中，innerHTML属性会替换掉原有内容，而appendChild方法可以保留原有内容并追加新的子节点。

在实际开发中，可以根据具体需求选择合适的方法。如果只需要简单地添加一些文本内容，可以使用innerHTML属性；如果需要添加更复杂的DOM节点，可以使用appendChild方法。

示例代码：https://codepen.io/chatgpt/pen/jOwQdPo

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8552