如何存储现有HTML元素并按需创建？克隆div元素问题求助

嘿，我看了你的代码，核心问题出在clone.innerHTML = current_element这行——你把DOM元素对象直接赋值给innerHTML了，但innerHTML需要的是HTML格式的字符串，不是元素本身，所以这行根本没法正确复制内容。下面给你两种简单有效的解决办法，都能实现你要的效果：

方法一：用原生cloneNode()（最推荐！） #

这是浏览器提供的标准克隆DOM元素的方法，能完整复制元素的结构、所有属性（包括class和id）以及子内容，省心又靠谱。注意要传true参数，表示深度克隆，连子元素一起复制：

<body>
  <div class="test_area" id="test_area">
    <h1> This is a test </h1>
  </div>
  <script>
    let current_element = document.getElementById('test_area')
    // 深度克隆整个元素（包括子节点）
    let clone = current_element.cloneNode(true)
    // 可选提示：页面里id应该唯一，要是你不想有重复id，可以给克隆体改个id
    // clone.id = "test_area_clone"
    document.body.appendChild(clone)
  </script>
</body>

方法二：手动用innerHTML复制内容 #

如果你非要用innerHTML的方式，那得先拿到原元素的HTML字符串，再手动把class、id这些属性复制过去：

<body>
  <div class="test_area" id="test_area">
    <h1> This is a test </h1>
  </div>
  <script>
    let current_element = document.getElementById('test_area')
    let clone = document.createElement('div')
    // 复制原元素的class和id
    clone.className = current_element.className
    clone.id = current_element.id
    // 复制原元素内部的HTML内容
    clone.innerHTML = current_element.innerHTML
    document.body.appendChild(clone)
  </script>
</body>

这种方式需要手动处理元素属性，不如第一种方法便捷，所以优先推荐cloneNode()。

两种方法都能让页面显示两行"This is a test"，完全符合你的需求~

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