获取当前页面存储该 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以后使用它。