About Me

Curriculum Vitae

A brief list of my current skill set


CoffeeScript and TypeScript are Stupid
Saturday, 17th August 2013, 11:21

Don't use them!

Changing the Order of the jQuery Event Queue
Wednesday, 3rd July 2013, 20:27

It's just a push to the left

How Do Spammers Get My Email Address?
Wednesday, 15th May 2013, 18:03

I think these days I have a pretty good idea

XSLT, node.js 0.10 and a Fun Two Days of Native Modules and Memory Leaks
Thursday, 25th April 2013, 17:14

documentation makes things less cryptic, so lets not write much of it

Fixing CentOS high cpu usage when running as a virtual machine under VirtualBox
Sunday, 21st April 2013, 20:28

innotek rocks! I mean Sun... I mean Oracle...

Repairing a dK'Tronics Keyboard and Scoping Out a ZX Spectrum 48k - Part One
Sunday, 17th March 2013, 23:51

What signals inside of it actually look like

Tabs vs Spaces and Why You Should Always Use Tabs
Monday, 4th March 2013, 19:51

Spaces are bad, just real bad

Why you should ban Amazon's Cloud IPs
Thursday, 27th December 2012, 14:50

And how to do it in nginx, Merry Christmas Amazon

Building Better jQuery DOM Inserts
Thursday, 20th December 2012, 15:18

Break it down baby

SEO Companies - Don't Waste Your Money
Wednesday, 12th December 2012, 16:16

Spammers by any other name

Pulse Width Modulation and How 1-bit Music Works
Wednesday, 5th December 2012, 23:34

Beep beep multi-channel!

Making PDFs from HTML on your webapp in CentOS
Thursday, 29th November 2012, 14:00

Not as easy as it should be

Some Days I Wish For an Async String.replace
Monday, 19th November 2012, 12:59

MinnaHTML to the rescue!

Object Oriented Programming for Javascript Dummies - Part 2
Tuesday, 6th November 2012, 15:33

OOP it up to the OOPballs

Object Oriented Programming for Javascript Dummies - Part 1
Tuesday, 30th October 2012, 16:01

Not using OOP? Are you mad?

Projects and Sillyness

MAME Cabinet Diary

How I built my own arcade cabinet

Loading Screen Simulator

I don't miss the ZX Spectrum, I still use it!

The Little Guy Chat Room

It's a Pitfall inspired chat room


A fully featured MP3 player what I wrote

GP Space Invaders

My first little emulator

GP32 Development Page

Some info and links about this cute little handheld

Disney Nasties

Uncensored images, you must be 18 to view them

Minna's World

The cuttest fluffy puppy in the world

Diary of a Hamster

Learn about how hamsters think, first hand


Time Calculator

A simple little online utility for working out how many hours to bill a client

A Few Links

Building Better jQuery DOM Inserts
Thursday, 20th December 2012, 15:18

So, write, you have some HTML that you need to insert into the DOM, how do you do it? Well, there are a couple of slightly different approaches for jQuery users, perhaps a common one is a simple string based approach like the following:

    $("#myarea").html("<div><h1>A Great Big Giant Heading</h1><p>Some paragraph text which refers to <span id='animal'>dogs</span> like <span id='name'>Minna</span></div>");

But this is quite messy, sure it's fine for changing or inserting some text, but what if you might want to do something a bit more complicated with that text after you've inserted it?

Well you use some jQuery objects for them after the fact, like this:

$("#myarea h1").html("An even bigger heading!");
$("#myarea p a").click(function() {
alert("Well yeah!");

But supposing at some point down the road you wanted to move this DIV you added? Or maybe remove it temporarily from the DOM and re-insert it later? Maybe you have a funky dialog box that pops up, and everytime it pops up you have to re-insert it, then set all the event binding up again.

A much more flexible way of doing the whole thing is like this:

    var hdTitle = $("<h1>A Great Big Giant Heading</h1>");

var txAnimal = $("<span id='animal'>dogs</span>");
var txName = $("<span id='name'>Minna</span>");
var paInfo = $("<p>Some paragraph text which refers to ", txAnimal, " like ", txName, "</p>");

var btClickMe = $("<a href='#'>Click Me!</a>");
var paButtons = $("<p></p>");

var dvOuter = $("<div></div>");
dvOuter.append(hdTitle, paInfo, paButtons);


At first glance, that is a bit more typing, but it offers more possibilities. Because you've already assigned variables to jQuery objects, you can do some interesting things. Obviously we can now do this instead of our first example:

    hdTitle.text("An even bigger heading!");
btClickMe.click(function() {
alert("Well yeah!");

Now, supposing we suddenly have to make it so our dialog can appear multiple times, clearly we have to change every ID to a class. But because we only name the element once, at the same time we assign it to a variable, we don't have to worry at all about searching our Javascript, which may be across many files, to find all the places we reference it.

Also, we can change the function of our button like this:

    var btDontClickMe = $("<a href='#'>Whatever You Do Don't Click Me!</a>");
btDontClickMe.click(function() {
alert("Well I did say?");

And then we can swap it back like this:


See! We don't even have to rebind the click event because the old one still exists even though it got replaced.

In fact this approach is better for other reasons, it seperates to a certain extent the code from the HTML it works on. That lets you change the HTML later on without having to worry as much about its affect on the underlying code.

I try to take this approach whenever matters allow, as breaking down things this way makes them much more manageable and flexible in the long run. Not to mention being more efficient when it comes to saving on DOM lookups. Now I know, some of you kids out there will go on about how computers are more powerful today so who cares if you work the CPU 0.5% harder by being lazy?

Thinking like that gave us Windows. I hate BASIC with a passion, but Bob Zale, author of PowerBASIC had it right when he plastered a mantra on his office walls:

Smaller, Faster, Smaller, Faster, Smaller, Faster.

Unless something makes code harder to read and maintain, then this is what every good coder should be thinking.


Add Your Own Comment