How do I encode HTMLTableSectionElement with Base64 and append decoded value

Question

I am saving some child nodes as Base64. This is to make passing a group of elements (nodes) around easier, ultimately saving the base64 string to a database and hopefully reading this back into the original HTML elements (nodes)

I am using atob() and btoa() https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

I am unable to re-use this base64 as I don't know how. I know how to convert it back into HTML.

In my application, when the user saves (clicks a button), it saves an HTML element (and children) using btoa and I get the 'funny' looking string.

Now, I need to reload this from the string into something HTML understand to display it in the GUI.

I use atob(myString) and I get an HTMLDivElement

I don't know how to use this. This means the following fails

My effort is (and this probably won't work in IE which is fine)

  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");
        }
    }

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

How do I recomsume the value that has been encoded and decoded? Ideally, with no JQuery or any framework, just Javascript

I've added JS as well but it won't work in IE (which is fine).

https://jsfiddle.net/uLb8okrs/2/

Answer 1

You are attempting to select, encode, decode and then append an Element which is a bit more convoluted than necessary for what you are trying to achieve. Instead, just get the HTML of the element you want "copy" via the outerHTML property, then encode, decode, and replace the HTML of your destination div.

For example:

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');
const encodeDecodeAppend = () => {
  const encoded = btoa(wrapper.outerHTML); //encoded HTML
  const decoded = atob(encoded); // decoded HTML
  destination.innerHTML = decoded;
};

button.addEventListener('click', encodeDecodeAppend);

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