javascript - How do I encode HTMLTableSectionElement with Base64 and append decoded value - Stack Overflow

admin管理员组

文章数量:1415139

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

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 plete");
        } catch  (e){
            alert("Failed on second effort");
        }

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

        try {
            destination.append(myString); //appends [object HTMLDivELement]
            alert("fourth attempt plete 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>

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/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 plete");
        } catch  (e){
            alert("Failed on second effort");
        }

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

        try {
            destination.append(myString); //appends [object HTMLDivELement]
            alert("fourth attempt plete 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 resume 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/uLb8okrs/2/

• javascript
• encoding
• base64
• decoding

Share Improve this question Follow edited Nov 10, 2018 at 9:23 Towkir 4,01422 gold badges2626 silver badges4242 bronze badges asked Nov 7, 2018 at 19:32 MyDaftQuestionsMyDaftQuestions 4,7311717 gold badges7575 silver badges140140 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +200

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>

You are trying to encode the DOM element, that's why you get an HTMLDivElement.

What you should do is take the innerHTML of the source element and then encode it, then save it to database or wherever you want, and then decode it again and set the innerHTML of the target element again.

Simple as that. Added ments in the code snippet to clear the steps as much as possible.

Also Notice the console output of myString after encoding, see how it's different from the one you found after encoding a element (not string)

Note: if you want the #wrapper element too, use outerHTML as benvc answered.

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

btn.addEventListener("click", performLogic);

function performLogic() {
  destinationEle.innerHTML = null;
  let myString = btoa(wrapperEle.innerHTML); //encode /// and take the innerHTML of it to parse, not the DOM itself
  console.log(myString); // check now what it looks like, or save it in database or wherever you want.
  let data = atob(myString); //decode /// again, after decoding you just get the string type data, not a DOM type
  destinationEle.innerHTML = data; // so, now you can set the string as an innerHTML to the target element
}

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

The issue you are having relates to the fact that unlike appendChild in many frameworks which obscure this fact, appendChild does not accept a string as a valid argument, which is what atob returns your given string as; appendChild only accepts a Node object as a valid argument (see https://developer.mozilla/en-US/docs/Web/API/ParentNode/append for further details)

Thus, perform this operation as you wish, you have 2 options:

1) must first convert your decrypted string into a node object, then call appendChild

const data = atob(myString);    
var node = document.createElement(data);
myHtmlElement.appendChild(node);

2) Simply use append opposed to appendChild

const data = atob(myString);    
myHtmlElement.append(node);

• Note: append will not work in IE

本文标签： javascriptHow do I encode HTMLTableSectionElement with Base64 and append decoded valueStack Overflow