I’ve been looking recently at the Proper Way To Do The DOM?, because the well-used innerHTML method of injecting something into a page is, ya know, sooo 2005. Instead we should be using the DOM to create elements and set attributes the proper way, rather than just spitting a HTML chunk into an existing element. The Proper DOM Way is very well demonstrated by Peter-Paul Koch here.
However, compared to just throwing around some HTML chunks, it’s a lot more complicated. And by a lot, I mean a lot. For instance, to create a paragraph with a link inside it, I’d have to do this:
// Create the link
newLink = document.createElement("a");
// Set the href of the link
newLink.setAttribute("href","path-to-the-document.htm");
// Set the TextNode (the bit of text you see) for the link
newLink.appendChild(document.createTextNode("Click here!"));
// Create a new paragraph
newParagraph = document.createElement("p");
// Put the link inside the paragraph
newParagraph.appendChild(newLink);
// Get the target element
var targetElement = document.getElementById("targetElement");
// Put the new paragraph and link into the target element
targetElement.appendChild(newParagraph;
Rather than the considerably shorter:
// Get the target element
var targetElement = document.getElementById("targetElement");
// Put the HTML in the element
targetElement.innerHTML = "";
So, what can we do? If I’m going to shout about the right way to do things, I can’t do it a non-standard way just because it saves my fingers (and brain) from some work. What I need is a way to simplify, and preferably automate to some extent, the Right Way.
So there I was, pondering my quandary, and I had an idea. The thing is, I’m not clever enough to make it happen, but perhaps someone else is, so I’ll write it here and hope that one day some person with a monstrous mind and Jedi coding fingers will Make It So.
OK, so what we want is to convert a HTML chunk:
Into a set of DOM elements with attributes:
(They look the same, but trust me when I say they are VERY different. Just look at the code samples above).
Maybe JavaScript could be leveraged (ugh, I’m a buzzword whore) to parse a HTML chunk and convert it to the correct format. Simple! Us developers get to write in a language we understand well (HTML) and output a language we don’t really want to know (XML).
I guess some advanced regular expression could be used to parse the HTML string and pull out the elements and their attributes, and only accept certain HTML elements – P, H1, H2, DIV, FORM etc. In fact, depending how complex it gets, the function could also validate the HTML chunk, only allowing certain attributes for each element, or checking they are properly nested, for instance.
Once the HTML chunk has been carved up, the function would then automatically write out the elements, attributes and textnodes using the DOM methods. It would certainly save a lot of typing. How about this:
var html = "";
if (!domInsertHTML($html, "targetElement")){
alert("Sorry, I couldn't put the HTML chunk into the target element.");
}
So, will anyone take up the challenge?