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

Question

I am create a tool where users can create their social share bar, but now I would like to create an in text styling feature so they set this piece of html in text to render the social share buttons:

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

Than I have a function determine html which look like this:

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>`;
  }
}

This is all good and renders the social bar wrapper div but how can I later append the var socialWrapper = document.querySelector(".socialShare").outerHTML; to the wrapper.

So basically when the user finishes the creation they get a piece of code and here is the function which needs to append the current html later on.

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

FYI: the output needs to work stand alone, ofcourse the above is not working because the selector .socialShare is not available in other documents.

So how can I store the current html of document.querySelector(".socialShare") to render this later on in a stand alone document.

Answer 1

If you use jQuery,

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

If want to use pure JavaScript,

var html = document.documentElement.innerHTML;

You can html use it later.