删除并重新添加含类定义的节点时触发重复声明错误，如何解决？

问题原因 #

虽然你用remove()删除了id="box"的DOM节点，但节点内的<script>在第一次加载时已经执行，class Sample已经在全局作用域完成声明。由于JavaScript中类不允许重复声明，当你把节点重新添加回<body>时，脚本会再次执行，触发Uncaught SyntaxError: Identifier 'Sample' has already been declared错误。

可行解决方案 #

• 移除节点前先删除内部脚本元素
  在移除box节点前，先把里面的<script>元素删掉，这样重新添加节点时就不会重复执行类声明代码：

  const box = document.getElementById('box');
  // 找到并移除内部的script标签
  const scriptEl = box.querySelector('script');
  if (scriptEl) scriptEl.remove();
  // 再移除box节点
  box.remove();
  // 重新添加回body时不会触发重复声明
  document.body.appendChild(box);
  

• 用函数作用域包裹类声明
  修改原脚本，把类放在自执行函数作用域内，避免污染全局作用域，即使脚本重复执行也不会触发重复声明：

  <div id="box">
    <script>
      (function() {
        class Sample {
          // 类内容
        }
        // 若需全局访问，可挂载到window：window.Sample = Sample;
      })();
    </script>
  </div>
  

• 克隆节点时排除脚本或不克隆子元素
  如果不需要保留原脚本的执行能力，可以克隆空的box节点，再重新添加所需内容：

  const box = document.getElementById('box');
  // 仅克隆box节点本身，不包含子元素
  const emptyBox = box.cloneNode(false);
  box.remove();
  // 往emptyBox添加内容后再append回body
  document.body.appendChild(emptyBox);
  

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