I have a bunch of little bits of HTML that I'd like to reuse on various pages and have looked at several ways to do this. I've come up with the following solution that uses a javascript function object to create the element and insert it into the page. Here is an example:

    <div id="id"></div>
    <script>var v = function(divid){
    var el = document.getElementById(id);
    el.innerHTML="<input type=\"button\" onclick=\"alert(\"hello world\"/>";}</script>

This is just a simple contrived example. The script creates a button and puts it into the div and assigns a function to it. In a real example the javascript would be a separate file and the function might create several HTML elements that interact with one another.

I then took this further and added object parameters. Here is the HTML:

    <div id="btndiv">{"button":"Click","message":"clicked"}</div>
    <script>var v = new PopButton(id);</script>

This is easy to read in an HTML page where I add the block element then the object is created in place. The widget object code looks like this:

    function PopButton(btndiv) {
     this.div = document.getElementById(btndiv);
     var jasontext = this.div.innerText;
     var jason = null;
     try {
      jason = JSON.parse(jasontext);
     } catch(e) {
      jason = {"button":"Click","message":"clicked"};
     }
     var h = "<button type=\"button\" id=\""+btndiv+"btn\"";
     h += " onclick=\"PopButtonClicked("+btndiv+"msg)\">"+jason.button+"</button>";
     h += "<div id=\""+btndiv+"msg\" style=\"display:none\">"+jason.message+"</div>";
     this.div.innerHTML = h;
    }
    function PopButtonClicked(msgel) {
      if(msgel.style.display === "none") {
        msgel.style.display = "block";
      } else {
        msgel.style.display = "none";
     }
    }

In other words, I use the innerText to send parameters to the javascript object and then replace that with the HTML that makes up the widget.

This is just a simple example to show parameter passing. More complex widgets can be built with this technique but I'm unsatisfied with parameter passing. In my implementation if the JSON.parse() encounters an error then the whole parameter is dropped and a default is set.

Is there a way to pass parameters that would allow for optional parameters? For example if I parsed the innerText with just '{"button":"clickme"}' and didn't include the "message" part that wouldn't generate an error if I referenced 'jason.message'?

Thank you, in advance.