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使用它。

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

1 个答案: