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

我这里有一个非常简单的 html 代码。我想存储整个 div test_area ，然后在需要时创建它。现在，让我们假设我想复制它并将克隆放在现有元素下方，我该怎么做？这是我尝试做但不起作用的事情（特别是innerHtml行）：

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

<script>
    let current_element = document.getElementById('test_area')
    let clone = document.createElement('div')
    clone.innerHTML = current_element
    document.body.appendChild(clone)
</script>

最后我希望最终的 html 版本看起来像这样：

这是一个测试

解决方法

取决于您想对元素做什么。您可以将它存储在一个变量中，然后在某个地方渲染，或者您可以将它存储到 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);

您可以在此处阅读有关克隆的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

这是一个代码笔示例：https://codepen.io/shnigi/pen/LYRQGOW

您可以简单地将旧对象转换为 JSON，然后对其进行解析并将其保存到 var。

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

通过这种方式，您可以访问 myObject 并随时显示它。

看看这个问题：
What is the most efficient way to deep clone an object in JavaScript?

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

document.getElementById("test_area").appendChild(Object.assign(document.createElement("h1"),{textContent: "This is a test"}))

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

要真正克隆，请使用 cloneNode

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

let p = document.getElementById("test_area").children[0]
let p_prime = p.cloneNode(true)

document.getElementById("test_area").appendChild(p_prime)

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

显然，我应该做的唯一一件事就是使用变量的 innerHTML 并将其附加到正文中，就像这样。我完全忘记了当前元素是一个对象，而不是 html 代码本身。

const current_element = document.getElementById('test_area');
document.body.appendChild(current_element.innerHTML)