如何存储现有的 html 元素并在以后创建它？
[英]How can I store an existing html element and create it later?
问题描述
I have a very simple html code here.
我这里有一个非常简单的 html 代码。 I want to store the whole div test_area and then create it when I need it.我想存储整个 div test_area，然后在需要时创建它。 For now, let's assume that I want to duplicate it and put the clone below the existing element, how can I do that?现在，假设我想复制它并将克隆放在现有元素的下方，我该怎么做？ Here's what I tried to do which didn't work (specifically the innerHtml line):这是我尝试做的但不起作用的事情（特别是 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>
In the end I want the final html version to look like this:最后，我希望最终的 html 版本看起来像这样：
This is a test这是一个测验
This is a test这是一个测验
4 个解决方案
解决方案1
1 2020-12-30 10:04:12
Depends what you want to do with the element.取决于你想对元素做什么。 You can store it in a variable and then render somewhere or you could store it to localstore or send to server or what ever you like.您可以将它存储在一个变量中，然后在某处渲染，或者您可以将其存储到 localstore 或发送到服务器或您喜欢的任何内容。 Here is a simple example:这是一个简单的例子：
<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);
You can read more about cloning here:https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode您可以在此处阅读有关克隆的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
And here is a codepen example: https://codepen.io/shnigi/pen/LYRQGOW这是一个代码笔示例： https://codepen.io/shnigi/pen/LYRQGOW
解决方案2
0 2020-12-30 10:00:41
You can simply convert the old object in a JSON, and then parsing it and save it to a var.您可以简单地将旧的 object 转换为 JSON，然后对其进行解析并将其保存为 var。
let myObject = JSON.parse( JSON.stringify( myOldObject ) );
this way you can access myObject and display it whenever you want.这样您就可以随时访问 myObject 并显示它。
Take a look to this question:看看这个问题：
What is the most efficient way to deep clone an object in JavaScript? 在 JavaScript 中深度克隆 object 的最有效方法是什么？
解决方案3
0 2020-12-30 10:25:19
This is not cloning, but a way to create and append in one line:这不是克隆，而是一种在一行中创建和 append 的方法：
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>
To actually clone, use cloneNode要实际克隆，请使用cloneNode
https://developer.mozilla.org/en-US/docs/Web/API/Node/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
0 2020-12-30 12:18:28
Apparently the only thing i should have done to fix this problem is use the variable's innerHTML and append it on the body, like this.显然，我唯一应该做的就是解决这个问题，就是在身体上使用变量的 innerHTML 和 append ，就像这样。 I had totally forgotten that current element is an object, not the html code itself.我完全忘记了当前元素是 object，而不是 html 代码本身。
const current_element = document.getElementById('test_area');
document.body.appendChild(current_element.innerHTML)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.