Как получить html код в переменную или массив javascript?

Question

[zeni1agent]

Мне необходимо сохранить результат 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

Comments

[Артур Мустафин]

Молодец, хотя и ожидаемо что ты используешь JSON.stringify и localStorage, вопрос следующий, ты специально берешь

sticky.children(".sticky-content").html()

или нет

[zeni1agent]

Артур Мустафин,
НУ
sticky.children(".sticky-content").html()
Нужен для того что бы сохранить текст написанный в div
Я пытался вывести результат и
alert (sticky.html() );
и
alert (that.html());
но результат один и тот же
я специально создал codepen для демонстраций
https://codepen.io/zeni-agentt/pen/gZdvJN

Answer 1

[zeni1agent]

Вот такой код я нашел для решения моей проблемы

var allHTML = $('<div>').append(content_zametki.clone()).html();