如何将已移除的DOM元素重新追加到原移除位置？

要把移除的元素恢复到原始位置，核心是在移除前记录它的位置信息——因为remove()只是将元素从DOM树中剥离，元素对象本身并没有被销毁，只要提前存好位置标记，就能精准插回原位。

具体实现代码 #

<p>Paragraph 1</p>
<div id="content">
  <h1>Content</h1>
</div>
<p>Paragarph 2</p>

<script>
const content = document.getElementById('content');
// 缓存元素原来的下一个兄弟节点，作为位置标记
let nextSiblingCache = null;

function hide(){
  // 移除前先记录下一个兄弟元素
  nextSiblingCache = content.nextElementSibling;
  content.remove();
}

function show(){
  if(nextSiblingCache){
    // 若原来有下一个兄弟，就插在它前面
    nextSiblingCache.before(content);
  } else {
    // 若原来就是父元素的最后一个子元素，直接追加到父元素末尾
    content.parentElement.appendChild(content);
  }
}
</script>

原理说明 #

• nextElementSibling会获取元素的下一个兄弟元素（自动忽略文本节点），用它做标记能准确定位元素的原始位置。
• 恢复时通过before()方法直接将元素插回标记节点前；如果标记节点不存在，说明元素原本在父元素的最后位置，用appendChild()追加即可。

内容的提问来源于stack exchange，提问作者haonan