各要素のinnerHTMLをjavascriptオブジェクトにJSON形式で格納しています。このオブジェクトから HTML を取得するにはどうすればよいですか?
オブジェクトはそのように見えます。
content[0]: ""<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 345.10072326660156px; top: 339.10418701171875px;"><h2 class="text2">Tikkkkkke</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 223px; height: 198px; top: 103.22222900390625px; left: 278.2222442626953px; margin: 0px;"><img id="link-2" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 198px; width: 223px;" src="http://i.imgur.com/sTxNVlo.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ↵ ""
私はこれからHTMLを取得しようとしています:
var x = document.getElementById("preview");
var y = (x.contentWindow || x.contentDocument);
var stepWrapper = y.document.querySelectorAll(".step-wrapper");
var contentObject = $("#data-store").data();
if (contentObject["content[0]"] !== undefined) {
for (var i = 0; i < stepWrapper.length; i++) {
stepWrapper[i].innerHTML = contentObject["content[" + i + "]"];
}
}
ただし、stepWrapper div 内に JSON を出力し、テキストを出力します。
" <div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 345.10072326660156px; top: 339.10418701171875px;"><h2 class="text2">Tikkkkkke</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;">..