將對象追加到innerHTML並從innerHTML獲取該對象

Question

這是jsfiddle中的示例。

我想知道是否可以將JavaScript對象附加到innerHTML，從而再次從innerHTML作為對象獲得該對象。

就像是，

alert((this.innerHTML).html);

那只是一個例子，不要問我為什么需要這個？ 我正在嘗試編輯現有代碼，因此必須這樣做。 我必須通過div.innerHTML傳輸對象。

Answer 1

檢查此jsfiddle 。 在其中，我使用JSON將對象作為“數據”屬性添加到div，將其轉換為字符串。 之后，在div中添加一些注釋會觸發DOMSubtreeModified -handler，在該處理程序中檢索對象的'html'部分並對其發出警報。 有什么需要配合的嗎？

Answer 2

在這種情況下，唯一可能的選擇是將對象轉換為字符串，然后將其放入元素中。 （這是通過遍歷鍵來完成的，通過值來構建字符串）。

您將反轉該過程以將其轉換回obj。

我知道一些javascript庫具有幫助程序功能，可以使此過程非常簡單。

您可以嘗試將數據直接添加到dom元素上，而不是作為其內容添加。

tempDiv.objData = myObject;

Answer 3

建議使用JSON，但不使用代碼。 所以：

function addObjAsJSON(el, obj) {
  el.setAttribute('data-myJSON', encodeURIComponent(JSON.stringify(obj)));
}

function getObjAsJSON(el) {
  return JSON.parse(decodeURIComponent(el.getAttribute('data-myJSON')));
}

那應該允許您將任何東西添加為序列化對象，然后將其取回。 您應該添加一些錯誤檢查以使其健壯（例如，檢查是否從對getAttribute的調用中返回了字符串）。

對於不具有內置JSON支持用戶代理，請參閱json.org其在JavaScript部分的鏈接json.js 。