load div with click function from same page and replace with other div which is already load

Question

i have a page where i add two div like div1 and div2 i want to stop load div2 on page load and create a button in div1 which will load div to in place or div1 or replace it with div1. this code work but it load both div and replace on click but i want to load it on click .

<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>

Answer 1

Initially show div1 and button but hide div2 with the help of CSS display:none . Create a function like copyContent and listen when the button is clicked.

In copyContent() copy the content of div1 and set it to div2 , at the same time show the div2 with style property to block .

 function copyContent() { const div2 = document.getElementById('div2') div2.innerText = document.getElementById('div1').innerHTML div2.style.display = 'block' } 

 <span class="ecf-answer" id="div1">Content here</span> <div id="div2" style="display: none;">Content taken from the span element</div> <button onclick="copyContent()">Teleport!!!</button>