appendChild 和 removeChild）

小道研究 • 2024年4月14日上午10:42 • 网站运维

【appendChild】

appendChild 方法是添加节点，将节点添加到指定父节点内子节点列表的末尾。如果获取的节点是当前文档中现有节点的引用，那 appendChild 则将其从当前位置移动到新的位置。

也就是说 appendChild 不止是添加节点，还有移动节点的功能。

一般用法：

<div id=\\\"main\\\"></div><script>  let createDiv = document.createElement(\\\'div\\\');  let createText = document.createTextNode(\\\'这是新添加的 div\\\');  createDiv.appendChild(createText);  let main = document.getElementById(\\\'main\\\');  main.appendChild(createDiv);</script>

输出结果为：

<div id=\\\"main\\\"><div>这是添加的 div</div></div>

这是添加当前文档中不存在的节点，如果当前文档存在此节点，那就需要移除然后再添加了。

<div id=\\\"outsideDiv\\\">这是添加的外层 div</div><div id=\\\"main\\\">  <p>main内容</p></div><script>  let outsideDiv = document.getElementById(\\\'outsideDiv\\\');  let main = document.getElementById(\\\'main\\\');  main.appendChild(outsideDiv);</script>

最终结果为：

<div id=\\\"main\\\">  <p>main内容</p>  <div id=\\\"outsideDiv\\\">这是添加的外层 div</div></div>

【removeChild】

已知父元素的情况下，删除子元素

<div id=\\\"main\\\">  <div id=\\\"main-container\\\">container</div></div>
<script>  let mainDiv = document.getElementById(\\\'main\\\');  let mainDivContainer = document.getElementById(\\\'main-container\\\');  mainDiv.removeChild(mainDivContainer);</script>

不知道其父元素的时候，想要删除元素，需要先获取它的父元素节点，然后才能删除。

<div id=\\\"main\\\">main</div><script>  let mainDiv = document.getElementById(\\\'main\\\');  if( mainDiv.parentNode ){    mainDiv.parentNode.removeChild(mainDiv);  }</script>

参考文档：

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

图片授权基于 www.pixabay.com 相关协议

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34561.html