FromHTML() - Mixing DOM & InnerHTML

Many modern libraries implement this type of function (I know prototype does), but it's a great one to have in your common.js in case you don't need a full library for projects.

The basic idea is that using .innerHTML to insert new elements is very convenient because you can simply provide a string of the new HTML, but you lose the precision of DOM insertion (for instance, if you want to insert a new element in the middle of a bunch of DOM siblings, you have to replace them all in the parents innerHTML).

Conversely, using DOM methods like insertBefore() are very precise but require you to make the entire structure with createElement calls. This can be a LOT of code when all you want to do is insert a new anchor element.

This elegant little solution combines both methods by riding on the fact than when you replace an element's innerHTML, the browser creates the appropriate DOM hierarchy for the new elements on the fly. So this function takes a string of HTML you want to make into a DOM structure, changes the innerHTML of a dummy element to render this structure, and then returns the first child.


// fromHTML()
function fromHTML(html) {
var root = document.createElement(‘div’);
root.innerHTML = html;
return root.firstChild;
}


Very simple to use, and very handy:

var node = fromHTML(’<a href=”home.html” title=”Going Home”>
<strong>There&rsquo;s no place like it</strong></a>’);

// Now you can use the precision of DOM methods without having
// to create the entire structure by hand:
element.insertBefore(thing, node);