Best Way To Inject Html Using Javascript

I'm hoping that this isn't too subjective. I feel there is a definitive answer so here goes. I want to create this html on the fly using JS (no libraries):

node.getElementsByTagName("div")[4].innerHTML =
    format(data.currentTime);

Alternatively, you can act on the HTML of the template:

<scripttype="text/javascript">var tmp = document.getElementById("tmp_audio").innerHTML;
// modify template HTML with token replacement
container.innerHTML += tmp;
</script>

Solution 2:

Shove the entire thing into a JS variable:

var html = '<ahref="#"id="playButton">Play</a>';
html += '<ahref="javascript: void(0)"id="muteUnmute">Mute</a>';
html += '<divid="progressBarOuter"><divid="bytesLoaded"></div><divid="progressBar"></div></div>';
html += '<divid="currentTime">0:00</div>';
html += '<divid="totalTime">0:00</div>';

Then:

document.getElementById("parentElement").innerHTML = html;

if you want theN:

document.getElementById("totalTime").innerHTML = "5:00";

Solution 3:

You can use

<scripttype="text/javascript">
    function appendHTML() {
        var wrapper = document.createElement("div");
        wrapper.innerHTML = '\
<ahref="#"id="playButton">Play</a>\
<ahref="javascript: void(0)"id="muteUnmute">Mute</a>\
<divid="progressBarOuter"> \
<divid="bytesLoaded"></div>\
    <divid="progressBar"></div>\
</div>\
<divid="currentTime">0:00</div>\
<divid="totalTime">0:00</div>\
';
        document.body.appendChild(wrapper);
    }
</script>

Solution 4:

If you live in 2019 and beyond read here.

With JavaScript es6 you can use string literals to create templates.

create a function that returns a string/template literal

function videoPlayerTemplate(data) {
    return `
        <h1>${data.header}</h1>
        <p>${data.subheader}</p>
        <a href="#"id="playButton">Play</a>
        <a href="javascript: void(0)"id="muteUnmute">Mute</a>
        <div id="progressBarOuter"> 
            <div id="bytesLoaded"></div>
            <div id="progressBar"></div>
        </div>
        <time id="currentTime">0:00</time>
        <time id="totalTime">0:00</time>
    `
}

Create a JSON object containing the data you want to display

vardata = {
     header: 'My video player',
     subheader: 'Version 2 coming soon'
}

add that to whatever element you like

const videoplayer = videoPlayerTemplate(data);
document.getElementById('myRandomElement').insertAdjacentHTML("afterbegin", videoplayer);

You can read more about string literals here

Solution 5:

edit: HTML import is now deprecated.

Now with Web Components you can inject HTML using an HTML .

The syntax looks like this:

<link  href="component.html" >

This will just load the content of the html file in the href attribute inline in the order it appears. You can any valid html in the loaded file, so you can even load other scripts if you want.

To inject that from JavaScript you could do something of the likes of:

varTag = document.createElement('link');
Tag.setAttribute('rel', '');
Tag.setAttribute('href', 'component.html');
document.body.appendChild(Tag);

At the time I am writing this, Chrome and Opera support HTML s. You can see an up to date compatibility table here http://caniuse.com/#feat=imports

But don't worry about browsers not supporting it, you can use it in them anyway with the webcomponentsjs polyfill.

For more info about HTML imports check http://webcomponents.org/articles/introduction-to-html-imports/