How do I encode HTMLTableSectionElement with Base64 and append decoded value

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/

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

add a comment |

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/

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

add a comment |

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/

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

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/

 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>

 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>

javascript encoding base64 decoding

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

edited Nov 10 '18 at 9:23

Towkir Ahmed

947620

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

asked Nov 7 '18 at 19:32

MyDaftQuestions

46412455

add a comment |

3 Answers
3

active

oldest

votes

+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 performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

answered Nov 9 '18 at 21:47

benvc

3,7921319

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

add a comment |

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

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

add a comment |

-1

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.org/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

answered Nov 7 '18 at 19:53

Austin Niccum

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53196531%2fhow-do-i-encode-htmltablesectionelement-with-base64-and-append-decoded-value%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

+200

For example:

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

answered Nov 9 '18 at 21:47

benvc

3,7921319

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

add a comment |

+200

For example:

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

answered Nov 9 '18 at 21:47

benvc

3,7921319

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

add a comment |

+200

For example:

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

answered Nov 9 '18 at 21:47

benvc

3,7921319

For example:

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

const wrapper = document.getElementById('wrapper');
const destination = document.getElementById('destination');
const button = document.getElementById('button');

const performLogic = () => 
 let encoded = btoa(wrapper.outerHTML); //encoded HTML
 let decoded = atob(encoded); // decoded HTML
 destination.innerHTML = decoded;


button.addEventListener('click', performLogic);

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

answered Nov 9 '18 at 21:47

benvc

3,7921319

answered Nov 9 '18 at 21:47

benvc

3,7921319

answered Nov 9 '18 at 21:47

benvc

3,7921319

answered Nov 9 '18 at 21:47

benvc

3,7921319

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

add a comment |

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

I think innerHTML is what he is looking for, at least the destination div text says so. Nice approach tough :)
– Towkir Ahmed
Nov 10 '18 at 6:44

@TowkirAhmed you may be right, but outerHTML replicates OP's attempted effort to encode, decode and append the div with id wrapper (the only thing the code sample uses innerHTML for is to set it to null for the destination div. That said, certainly makes sense to just take the innerHTML and is a minor substitution here if that is what OP wants.
– benvc
Nov 10 '18 at 15:12

You are right too, it just depends on what he decides to take now :)
– Towkir Ahmed
Nov 10 '18 at 15:15

add a comment |

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

Simple as that.
Added comments 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>

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

add a comment |

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

Simple as that.
Added comments 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>

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

add a comment |

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

Simple as that.
Added comments 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>

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

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

Simple as that.
Added comments 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>

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>

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>

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

answered Nov 10 '18 at 6:40

Towkir Ahmed

947620

add a comment |

-1

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

answered Nov 7 '18 at 19:53

Austin Niccum

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

add a comment |

-1

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

answered Nov 7 '18 at 19:53

Austin Niccum

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

add a comment |

-1

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

answered Nov 7 '18 at 19:53

Austin Niccum

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

answered Nov 7 '18 at 19:53

Austin Niccum

answered Nov 7 '18 at 19:53

Austin Niccum

answered Nov 7 '18 at 19:53

Austin Niccum

answered Nov 7 '18 at 19:53

Austin Niccum

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

add a comment |

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

I have updated my post, with your example and others, including working code to demonstrate this
– MyDaftQuestions
Nov 8 '18 at 9:46

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt