@zeni1agent

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

Мне необходимо сохранить результат 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
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
@zeni1agent Автор вопроса
Вот такой код я нашел для решения моей проблемы
var allHTML = $('<div>').append(content_zametki.clone()).html();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Digital Sharks Казань
от 60 000 до 65 000 руб.
Ingram Micro Cloud Москва
от 170 000 руб.
Alternativa Games Пермь
от 40 000 до 80 000 руб.
16 янв. 2019, в 14:53
20000 руб./за проект
16 янв. 2019, в 14:52
3000 руб./за проект
16 янв. 2019, в 14:26
50 руб./за 1000 зн.