Hi there,

I never learned javascript before I got into jQuery, so I've decided to use pure js for a little side-project to get my js chops up.

I've run into a problem almost instantly:

<html lang="en-GB">
<meta charset="utf8">

<div id="span-holder"></div>

var elem = document.createElement('span');
elem.className = "newSpan";
elem.innerHTML = "My shiny new span element";
elem.onclick = function(){ alert('Hi!'); };

var spanHolder = document.getElementById('span-holder');


I was hoping that the span would have a click event when it was added to the DOM. Alas, it does not. Do I really have to add the click event AFTER the element has been added to the DOM?

If so, what are the pros/cons of doing this instead:
var spanHolder = document.getElementById('span-holder');

spanHolder.innerHTML = '<span class="newSpan" onclick="alert(\'Hi\')">My shiny new span element</span>';
Many thanks,