【问题标题】：How can I store an existing html element and create it later?如何存储现有的 html 元素并在以后创建它？
【发布时间】：2021-04-06 20:14:11
【问题描述】：

我这里有一个非常简单的 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 版本看起来像这样：

这是一个测试

【问题讨论】：

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

标签： javascript html createelement

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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>

【讨论】：

【解决方案4】：

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

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

【讨论】：