如何添加和删除html_动态添加或删除HTML页面元素操作【操作】

可通过JavaScript操作DOM动态添加或删除HTML元素：一、appendChild()追加子节点；二、insertBefore()在指定位置插入；三、innerHTML字符串注入（注意XSS风险）；四、removeChild()通过父节点删除；五、remove()直接删除自身（不兼容IE）。

如果您需要在网页运行过程中动态添加或删除HTML元素，可以通过JavaScript操作DOM来实现。以下是几种常用的操作方法：

一、使用appendChild()添加元素

该方法将新创建的元素作为子节点追加到指定父元素的末尾，适用于在容器底部插入内容。

1、使用document.createElement()创建一个新元素节点，例如document.createElement('p')。

2、为新元素设置innerHTML、className、id等属性，如newElement.innerHTML = '动态内容'。

立即学习“前端免费学习笔记（深入）”；

3、通过document.getElementById()或querySelector()获取目标父容器节点。

4、调用父节点的appendChild()方法，传入新创建的元素节点。

二、使用insertBefore()在指定位置插入元素

该方法允许将新元素插入到父元素中某个现有子元素之前，从而实现精确控制插入位置。

1、创建新元素节点，并完成基本属性设置。

2、获取父容器节点和参考子节点（即希望新元素插入在其之前的那个节点）。

3、调用父节点的insertBefore()方法，参数依次为新元素和参考子节点。

4、若参考子节点为null，则等效于appendChild()，新元素将被添加至末尾。

三、使用innerHTML直接插入HTML字符串

该方式通过修改父元素的innerHTML属性，以字符串形式批量注入HTML结构，适合快速渲染简单片段。

1、获取目标父容器节点，例如const container = document.getElementById('list')。

标签： javascript java html node 浏览器 app ai ie浏览器 html元素