获取当前页面html，存储该html并在以后使用

Question

我正在创建一个工具，用户可以在其中创建他们的社交共享栏，但现在我想创建一个文本样式功能，以便他们在文本中设置这段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")的当前html，以便稍后在独立文档中呈现它。

Answer 1

如果您使用jQuery，

var html = $("html").html();

如果想要使用纯JavaScript，

var html = document.documentElement.innerHTML;

您可以稍后html使用它。