javascript通过dom操作可动态修改文档结构：先获取元素，再用createelement、appendchild、insertbefore等方法添加；remove、removechild、replacechild删除或替换；clonenode复制；移动元素会自动从原位置移除。
JavaScript 可以直接操作 DOM（文档对象模型），动态添加、删除、替换或移动页面中的元素，从而修改文档结构。关键在于获取目标元素，再调用对应的方法完成变更。
添加新元素
常用方法是先创建元素，再插入到指定位置。
-
document.createElement(tagName) 创建新元素节点，比如
const div = document.createElement('div'); -
element.appendChild(child) 把子节点加到最后，如
parent.appendChild(div); - element.insertBefore(newNode, referenceNode) 插入到某个节点前，referenceNode 必须是 parent 的子节点
- 也可以用 innerHTML 或 insertAdjacentHTML 快速注入 HTML 字符串，例如：
el.insertAdjacentHTML('beforeend', '<p>新段落</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common"><img src="https://img.php.cn/upload/skill/000/000/081/179222954019613.jpg" alt="Java Maven Common" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="overflowclass">Java Maven Common</a> <p class="overflowclass">Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。</p> </div> <a rel="nofollow" href="/xiazai/skill8775" title="Java Maven Common" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>');
删除和替换元素
要移除某部分结构，需定位父节点并调用移除方法。
- element.remove() 直接删掉自身（现代浏览器支持）
-
parent.removeChild(child) 通过父节点删除子节点，需要先获取 parent，如
child.parentNode.removeChild(child); - element.replaceChild(newChild, oldChild) 替换子节点，newChild 和 oldChild 都必须是 element 的子节点
移动和复制元素
DOM 节点可以被“搬家”或克隆，无需重新创建。
- 把一个已存在的元素传给 appendChild 或 insertBefore，它会自动从原位置移走，再插入新位置
-
element.cloneNode(true) 深拷贝（含子节点和事件监听器需手动处理），
false只复制自身 - 移动后原位置不再保留该元素，DOM 中同一节点不能同时存在于两个地方
修改元素位置关系
调整父子、兄弟关系是结构变更的核心，依赖对 parentNode 和 nextSibling 等属性的理解。
- 用 element.parentElement 获取父节点，确认插入前提
- 用 element.nextElementSibling 或 element.previousElementSibling 定位相邻元素，辅助插入
- 注意：操作前确保目标节点存在且未被移除，避免报错
Cannot read property 'appendChild' of null
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
