Get html of current page store that html and use it later

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.

Possible duplicate of [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) — mpm, Sep 12 '18 at 13:23
Why don't you just make two. three different HTML templates the user can embed? I don't understand why you'd want to use localStorage and a script just to create different versions, while you can just create different snippets of HTML to begin with. — Shilly, Sep 12 '18 at 13:29
@Shilly because this html template is dynamic based on the users choice — Sireini, Sep 12 '18 at 13:32
I understand that, but will the user change their choices After they have created the code in your tool? And if so, why not opt for CSS styling so a floating bar can become an expanding bar without javascript involved? — Shilly, Sep 12 '18 at 13:38

Nandan Bhat · Answer 1 · 2018-09-12T13:30:38.633

0

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.

edited Sep 12 '18 at 13:30

answered Sep 12 '18 at 13:19

Nandan Bhat

1,573
2
9
21

lets say I use this and load this in an other file than it will store the current html of that new file. – Sireini Sep 12 '18 at 13:28
Can you explain me how are you loading this another file ? – Nandan Bhat Sep 12 '18 at 13:31
First I let the user click through a menu and choose some options. Than they click a button and it will render – Sireini Sep 12 '18 at 13:35

Get html of current page store that html and use it later

1 Answers1