获取当前页面的HTML存储该HTML并稍后使用

我正在创建一个工具,用户可以在其中创建他们的社交共享栏,但现在我想创建一个文本样式功能,以便他们将这段HTML文本设置为呈现社交共享按钮:

<div id="fs_social-bar-wrapper"></div>

比我有一个函数确定HTML,它看起来像这样:

function determineHtml(){
  var socialWrapper = document.querySelector(".socialShare").outerHTML;
  var shareBarStyling = localStorage.getItem("shareBarStyling");

  if(shareBarStyling === "floating_bar" || shareBarStyling === "expanding_bar"){
    document.querySelector("#shareButton-code").innerHTML += socialWrapper;
  } else if(shareBarStyling === "inline_bar"){
    document.querySelector("#shareButton-code").innerHTML += `<div id="fs_social-bar-wrapper"></div>`;
  }
}

这一切都很好,并且呈现了社会化条形包装器DIV,但是我以后如何附加 var socialWrapper = document.querySelector(".socialShare").outerHTML; 在包装纸上。

所以基本上,当用户完成创建时,他们会得到一段代码,下面是稍后需要附加当前HTML的函数。

function appendInlineHtml(){
  document.querySelector("#fs_social-bar-wrapper").innerHTML = document.querySelector(".socialShare").outerHTML;
}

仅供参考:输出需要独立工作,当然上面没有工作,因为选择器 .socialShare 在其他文档中不可用。

那么我如何存储 document.querySelector(".socialShare") 稍后在独立的文档中呈现。