可通过JavaScript操作DOM动态添加或删除HTML元素：一、appendChild()追加子节点；二、insertBefore()在指定位置插入；三、innerHTML字符串注入（注意XSS风险）；四、removeChild()通过父节点删除；五、remove()直接删除自身（不兼容IE）。
如果您需要在网页运行过程中动态添加或删除HTML元素，可以通过JavaScript操作DOM来实现。以下是几种常用的操作方法：
一、使用appendChild()添加元素
该方法将新创建的元素作为子节点追加到指定父元素的末尾，适用于在容器底部插入内容。
1、使用document.createElement()创建一个新元素节点，例如document.createElement(‘div’)。
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’)。
2、构造合法的HTML字符串，如’
新列表项’。
3、执行container.innerHTML += htmlString，实现追加；或container.innerHTML = htmlString，实现整体替换。
注意：此方法会销毁原有子节点绑定的事件监听器，且存在XSS风险，不建议插入用户输入内容。
四、使用removeChild()删除指定子元素
该方法从DOM树中移除已知的子节点，需明确指定待删除的目标节点及其父节点。
1、通过getElementById()、querySelector()或事件对象的target属性获取要删除的子元素引用。
2、调用该子元素的parentNode属性获取其父节点。
3、在父节点上调用removeChild()方法，并传入子元素作为参数。
若尝试删除不存在的节点或未正确获取父节点，将抛出TypeError异常。
五、使用remove()方法直接删除当前元素
该方法无需访问父节点即可删除自身，语法简洁，是现代浏览器推荐的删除方式。
1、获取目标元素节点，例如const btn = document.querySelector(‘.delete-btn’)。
2、在该节点上调用remove()方法，如btn.remove()。
3、该操作立即从DOM中移除该节点及其所有子节点，并断开其与文档的关联。
remove()不兼容IE浏览器，如需支持旧版本IE，应改用removeChild()。
以上就是如何添加和删除html_动态添加或删除HTML页面元素操作【操作】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605424.html
微信扫一扫 
支付宝扫一扫 
