Separating JavaScript from HTML Structure

I was answering a question in relation to JavaScript and jQuery on StackOverflow today, and in doing so, another user came up with this comment:

“It’s generally understood that if you make changes to the (HTML) structure, you’ll have to update the javascript”

Now this I tried to explain why this was wrong in the context, but I thought it would be a good idea to write a post on how writing better JavaScript can improve future development efforts.

The post in question was relating to a blog scenario, so I will stick to that.

So this is a nice simple template for display a blog post snippet, with a read more link to expand the rest of the text. We need to add some JavaScript to make this work:

So this does our job nicely? It does indeed work (see http://jsfiddle.net/tGzCQ/1/). However what happens if we want to make changes. I want to do a bit to the Read More:

Now suddenly because of such a simple change, our JavaScript doesn’t work (http://jsfiddle.net/tGzCQ/2/). The Read More… changes to Read Less… when clicked, but the hidden paragraph never expands. This is because we used .parent(). This is an absolute reference to the parent container of the element, now that we have changed the structure, the parent container has changed. We can resolve this by instead replacing the use of .parent() with .closest(‘.blog-post’). This now searches up in the DOM tree to find the first element that matches our selector. This will always find the containing blog-post div.

This has now fixed our code (http://jsfiddle.net/tGzCQ/4/), and as long as we leave the basic structure the same, we can make any number of manipulations to our HTML structure of each blog-post item, without having to worry about our JavaScript. The person who made the comment mentioned at the start of the post also argued that you are just as likely to make class name changes as html structure changes, however again in good programming this is not the case. If I for any reason need to change the class name of something, then it is likely I am making a change that affects the nature of the item, and the JavaScript code is not valid. If I make changes to the HTML structure, it is likely I want a different display, but the overall element’s purpose remains the same, and hence the JavaScript code should continue to function.

I also made one more change in the code above. This was caching the value of $(this) by setting a variable equal to it. This is good practice as every call to $(this) requires entering the DOM to retrieve the element. This is unnecessary as we can retrieve the element once and store it for use later in our code. Although this is a small example, if you imagine doing this throughout the entire document this saves a huge amount of processing. I will look to expand more on this topic at a later date.

So I hope this post has been useful and explained why keeping more separation from the HTML structure in the JavaScript code can be beneficial. It should be possible to make large changes to your document with minimal effect on your JavaScript, otherwise the whole situation becomes very difficult to manage.

Leave a Reply