javascript如何用dom方法来删除div添加div
2026-10-22 23:22:04
在JavaScript中，可以使用DOM方法来删除和添加div元素。以下是具体操作方法：
一、添加div元素
使用appendChild方法
首先，使用document.createElement('div')创建一个新的div元素。
然后，通过appendChild方法将这个新创建的div元素添加到指定的父元素中。例如：fatherEle.appendChild(newDiv);
这种方法会将新div元素追加到父元素的末尾，而不会覆盖父元素原有的内容。
使用innerHTML属性
另一种方法是拼接包含div的HTML字符串，然后通过设置父元素的innerHTML属性来添加内容。例如：fatherEle.innerHTML += '<div>新内容</div>';
需要注意的是，这种方法会直接替换父元素中所有的HTML内容，如果只想追加内容，需要确保保留原有内容。
二、删除div元素
使用removeChild方法
要删除特定的div元素，首先需要获取该元素的引用。可以通过document.getElementById或其他选择器方法来实现。
然后，调用父元素的removeChild方法，并将要删除的div元素作为参数传递。例如：document.getElementById('fatherBox').removeChild(divToRemove);
也可以直接使用子元素的parentNode属性来删除它，如：divToRemove.parentNode.removeChild(divToRemove);
清空父元素内容
如果要清空父元素下的所有内容，包括所有的div元素，可以将父元素的innerHTML属性设置为空字符串。例如：fatherEle.innerHTML = '';
注意事项
- 在使用DOM方法操作元素时，请确保DOM已经完全加载，通常可以将JavaScript代码放在window.onload事件处理程序中或文档的底部。
- 避免使用document.write方法，因为它会覆盖页面上的所有内容。
热门标签
