在前端开发中，我们经常需要通过JavaScript向一个HTML元素中追加数据。本文将介绍如何使用JavaScript向一个div元素中动态添加内容。
1. 使用innerHTML属性
innerHTML是一个常用的属性，它可以获取或设置一个元素的HTML内容。要向一个div元素中追加数据，我们可以使用以下代码：
----- ---------- - --------------------------------- -------------------- -- --------
上面的代码首先获取了一个id为myDiv的div元素，然后将其innerHTML属性的值与新的内容字符串拼接，从而实现向该div元素中追加内容。
需要注意的是，使用innerHTML属性会替换掉该元素原有的所有子节点，因此如果想保留原有内容，需要在innerHTML属性的值中同时包含原有内容和新的内容。
2. 使用appendChild方法
另外一种向div元素中追加数据的方法是使用appendChild方法。该方法可以将一个新的DOM节点添加到指定元素的子节点列表的末尾。以下代码展示了如何使用appendChild方法向div元素中追加一个新的p元素：
----- ---------- - --------------------------------- ----- -------- - ---------------------------- -------------------- - -------- ---------------------------------
上述代码首先创建了一个新的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