Мне необходимо сохранить результат html кода созданного в javascript
В переменную или массив в виде обычного html кода
для этого я создал вот такой код
var youf = [];
var STICKIES = (function () {
var initStickies = function () {
$("<div />", {
text : "+",
"class" : "add-sticky",
click : function () { createSticky(); }
}).prependTo(document.getElementById( 'hint-add'));
initStickies = null; },
openStickies = function () {
initStickies && initStickies();
for (var i = 0; i < localStorage.length; i++) {createSticky(JSON.parse(localStorage.getItem(localStorage.key(i)))); }},
createSticky = function (data) {
data = data || { id : +new Date(), top : "40px", left : "40px", text : "Note Here", width: '100px', height: '100px'}
var content_zametki = $("<div />", {
"class" : "sticky",
'id' : data.id })
.prepend($("<div />", { "class" : "sticky-header"} )
.append($("<span />", {
"class" : "sticky-status",
text : "status",
click : saveSticky }))
.append($("<span />", {
"class" : "close-sticky",
text : "Х",
click : function () { deleteSticky($(this).parents(".sticky").attr("id")); }})))
.append($("<div />", {
html : data.text,
contentEditable : true,
"class" : "sticky-content",
keypress : markUnsaved
})).resizable({
handle : "div.sticky-content",
stack : ".sticky",
start : markUnsaved,
stop : saveSticky })
.draggable({
handle : "div.sticky-header",
stack : ".sticky",
start : markUnsaved,
stop : saveSticky })
.css({position: "absolute",
"top" : data.top,
"left": data.left,
"width" : data.width,
"height" : data.height
}).focusout(saveSticky) ;
content_zametki.appendTo(document.getElementById( 'hint-container'));
var html_cont = content_zametki.html()
youf.push(html_cont); },
deleteSticky = function (id) {
localStorage.removeItem("sticky-" + id);
$("#" + id).fadeOut(200, function () { $(this).remove(); }); },
saveSticky = function () {
var that = $(this), sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky'): that,
obj = {
id : sticky.attr("id"),
top : sticky.css("top"),
left: sticky.css("left"),
width : sticky.css("width"),
height: sticky.css("height"),
text: sticky.children(".sticky-content").html()}
localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));
sticky.find(".sticky-status").text("saved");},
markUnsaved = function () {
var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
sticky.find(".sticky-status").text("unsaved"); } ;
return {
open : openStickies,
init : initStickies
}; }());
STICKIES.open();
youf.forEach(function(element) { alert (element); });
Я смог сохранить почти весь html код
<div class="sticky-header"><span class="sticky-status">status</span><span class="close-sticky">Х</span></div><div contenteditable="true" class="sticky-content">sder</div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" unselectable="on" style="z-index: 1001;"></div>
но проблема в том что я не могу сохранить первый див
<div class="sticky ui-resizable ui-draggable" id="1547153267220" style="position: absolute; top: 127px; left: 651px; width: 811px; height: 308px;"></div>
В итоге должно сохранится вот такой html код
html_cont = '<div class="sticky ui-resizable ui-draggable" id="1547153267220" style="position: absolute; top: 127px; left: 651px; width: 811px; height: 308px;"><div class="sticky-header"><span class="sticky-status">status</span><span class="close-sticky">Х</span></div><div contenteditable="true" class="sticky-content">sder</div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" unselectable="on" style="z-index: 1001;"></div></div>' ;
Код на codepen для лучшего понимания
codepen 
