如何将javascript生成的HTML代码放入变量或数组中

我需要将在 javascript 中创建的 HTML 代码的结果以常规 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);
});

在命令的帮助下，content_zametki.html()我能够保存几乎所有的 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 sticky ，结果整个HTML代码应该在变化中

var 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来更好地理解这段代码的作用。