JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<table>
<tr>
  <td>data 01</td>
  <td>data 02</td>
</tr>
</table>
</div>

<input type="button" id="button" value="Click" />

<div id="destination">
I want and expect this line of text to be replaced with the table content above after you click on the button
</div>

JavaScript

const wrapperEle = document.getElementById("wrapper");
        const destinationEle = document.getElementById("destination");
        const btn = document.getElementById("button");

        btn.addEventListener("click", performLogic);

        function performLogic() {

            destinationEle.innerHTML = null;

            const myString = btoa(wrapperEle); //encode
            const data = atob(myString);       //decode

            try {
                const node = document.createElement(data);
                destination.appendChild(node);
            } catch (e){
                alert("Failed on first effort");
            }

            try {
                destination.append(data); //appends [object HTMLDivELement]
                alert("second attempt complete");
            } catch  (e){
                alert("Failed on second effort");
            }

              try {
                destination = data; //appends [object HTMLDivELement]
                alert("third attempt complete but nothing shows");
            } catch  (e){
                alert("Failed on third effort");
            }
             
              try {
                destination.append(myString); //appends [object HTMLDivELement]
                alert("fourth attempt complete but nothing shows");
            } catch  (e){
                alert("Failed on fourth effort");
            }

        }