Javascript 从同一页面使用单击功能加载div，并替换为已加载的其他div

我在一个页面中添加了两个div，比如div1和div2 我想在页面加载中停止加载div2，并在div1中创建一个按钮，将div加载到适当的位置或div1，或者用div1替换它。 这段代码可以工作，但它在单击时加载div和replace，但我想在单击时加载它

<span class="ecf-answer" id="div1">Content here</span>

<div id="div2">Content taken from the span element</div>

<button onclick="document.getElementById('div2').innerHTML = document.getElementById('div1').innerHTML">Teleport!!!</button>

这里的内容
内容取自span元素
传送！！！

最初显示

div1

和按钮，但在CSS的帮助下隐藏

div2

：无。创建一个类似于

copyContent

的函数，并在单击按钮时收听

在

copyContent（）

中，复制

div1

的内容，并将其设置为

div2

，同时将带有样式属性的

div2

显示到

block

函数copyContent（）{
const div2=document.getElementById（'div2'）
div2.innerText=document.getElementById（'div1'）.innerHTML
div2.style.display='block'
}

这里的内容
内容取自span元素
传送
内容这里的内容取自span元素传送据我所知，您希望您的页面显示div1和按钮，当单击按钮时，div1的内容被div2中的内容替换，对吗？如果是这样，您可以在cssRight中隐藏（display:none）div2，我使用您所说的代码，但我只希望在页面上加载div1并在单击事件时加载div2，而不是像您所说的在单击事件时加载并隐藏div2然后替换它。。。有没有办法停止加载div并在单击事件时加载div并替换为其他div…？如果您真的不希望在单击之前div2出现在html中，我认为您需要从外部源（例如ajax请求）获取其内容作为替代，如果您对html中短暂闪烁的div2没有意见，那么可以将其添加为隐藏，并且一旦加载页面，使用javascript将其删除，并将其内容存储在variabledownvoter中：请解释原因。这没有帮助吗？我的错误：）？最初
div2
是隐藏的。我想OP希望在单击按钮时显示
div2
。不仅在单击后显示，我还希望在单击后加载它。