I am saving some child nodes as Base64
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/
from How do I append HTMLTableSectionElement
No comments:
Post a Comment