Как мне кодировать HTMLTableSectionElement с Base64 и добавлять декодированное значение

Question

Я сохраняю некоторые дочерние узлы как Base64. Это облегчает передачу группы элементов (узлов), в конечном итоге сохраняя строку base64 в базе данных и, возможно, считывая ее обратно в исходные элементы (узлы) HTML

Я использую atob() и btoa() https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

Я не могу повторно использовать этот base64, так как не знаю как. Я знаю, как преобразовать его обратно в HTML.

В моем приложении, когда пользователь сохраняет (нажимает кнопку), он сохраняет элемент HTML (и дочерние элементы), используя btoa, и я получаю «забавную» строку.

Теперь мне нужно перезагрузить это из строки в нечто, понятное HTML, чтобы отобразить его в графическом интерфейсе.

Я использую atob(myString) и получаю HTMLDivElement

Я не знаю, как это использовать. Это означает, что следующее не удается

Мои усилия (и это, вероятно, не будет работать в IE, что хорошо)

  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>

Как мне пересчитать значение, которое было закодировано и декодировано? В идеале, без JQuery или каких-либо рамок, просто Javascript

Я также добавил JS, но он не будет работать в IE (что нормально).

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

Answer 1

Вы пытаетесь выбрать, кодировать, декодировать, а затем добавить Element, что немного более запутанно, чем необходимо для того, чего вы пытаетесь достичь. Вместо этого просто получите HTML-код элемента, который вы хотите «скопировать», через свойство outerHTML, затем закодируйте, декодируйте и замените HTML-код получателя 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>

Answer 2

Вы пытаетесь закодировать элемент DOM, поэтому вы получаете HTMLDivElement.

Что вам нужно сделать, это взять innerHTML исходного элемента и затем encode его, затем сохранить его в базе данных или где угодно, а затем decode снова и установить innerHTML цели элемент снова.

Все просто. Добавлены комментарии во фрагмент кода, чтобы максимально очистить шаги.

Также Обратите внимание на вывод консоли myString после кодирования, посмотрите, как он отличается от того, который вы нашли после кодирования element (не строка)

Примечание: , если вы тоже хотите элемент #wrapper, используйте outerHTML в качестве ответа benvc.

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>

Answer 3

Проблема, с которой вы столкнулись, связана с тем фактом, что в отличие от appendChild во многих средах, скрывающих этот факт, appendChild не принимает строку в качестве допустимого аргумента, а именно то, что atob возвращает заданную строку как; appendChild принимает только объект Node в качестве допустимого аргумента (более подробную информацию см. https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append)

Таким образом, выполнив эту операцию, как вам угодно, у вас есть 2 варианта:

1) сначала необходимо преобразовать расшифрованную строку в объект узла, затем вызвать appendChild

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

2) Просто используйте append вместо appendChild

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

• Примечание: append не будет работать в IE