Javascript 如何存储现有html元素并在以后创建它？

我这里有一个非常简单的html代码。我想存储整个div test_区域，然后在需要时创建它。现在，让我们假设我想要复制它，并将克隆放在现有元素下面，我如何才能做到这一点？以下是我试图做的但不起作用的事情（特别是innerHtml行）：

这是一个测试
让当前元素=document.getElementById（'测试区域'）
让clone=document.createElement（'div'）
clone.innerHTML=当前元素
document.body.appendChild（克隆）

最后，我希望最终的html版本如下所示：

这是一个测试

---

这是一个测试您可以简单地将旧对象转换为JSON，然后解析它并将其保存到var

let myObject = JSON.parse( JSON.stringify( myOldObject ) );

这样，您就可以访问myObject并随时显示它

---

看看这个问题：

---

取决于您希望对元素执行的操作。您可以将其存储在一个变量中，然后在某个地方进行渲染，也可以将其存储到localstore或发送到服务器或任何您喜欢的地方。下面是一个简单的例子：

<div class="test_area" id="test_area">
    <h1>
        This is a test
    </h1>
</div>

<div id="clonearea"></div>

 const current_element = document.getElementById('test_area');
 const clonearea = document.getElementById('clonearea');
 const clone = current_element.cloneNode(true);
 clonearea.appendChild(clone);

这是一个测试
const current_element=document.getElementById（'test_area'）；
const clonearea=document.getElementById（'clonearea'）；
const clone=current_element.cloneNode（真）；
附子克隆；

您可以在此处阅读有关克隆的更多信息：

---

下面是一个代码笔示例：

这不是克隆，而是一种在一行中创建和附加的方法：

document.getElementById（“测试区域”）.appendChild（Object.assign（document.createElement（“h1”），{textContent:“这是一个测试”}））

这是一个测试

显然，要解决这个问题，我唯一应该做的就是使用变量的innerHTML并将其附加到主体上，如下所示。我完全忘记了当前元素是一个对象，而不是html代码本身

const current_element=document.getElementById（'test_area'）；
document.body.appendChild（当前_元素.innerHTML）