Creating nested tags using document.createElement

Question

I want to create a nested tag using javascript createElement function like

<li><span class="toggle">Jan</span></li>

Can anyone give me an idea how to do it?

Answer 1

The simplest way is with createElement() and then set its innerHTML:

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

You can then add it to the document with .appendChild() wherever you want it to go.

Answer 2

var li = document.createElement('li');
var span = document.createElement('span');
span.className = 'toggle';
span.appendChild(document.createTextNode('Jan'));
li.appendChild(span);