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:

Code:
<!DOCTYPE>
<html lang="en-GB">
<head>
<meta charset="utf8">
</head>

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

<script>
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');

spanHolder.appendChild(elem);
</script>

</body>
</html>
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:
Code:
var spanHolder = document.getElementById('span-holder');

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