Question

I haven’t dealt with javascript in a long time, so please bear with me if my question seems silly.

I am trying to create an image, set its ID, and then try to ‘get’ the element, I always come up with ‘null’

  var gearImg = new Image();
  gearImg.id = "logoGear";
  gearImg.src = "img/gear-fun.png";

  var gear = document.getElementById("logoGear");
  // null?
  alert(gear);

If I have an actual image in my HTML with the id set, then ‘getElementByID’ works as expected. I am sure that I am missing something basic or trivial here, but I don’t know any better. What is going on, and how do I get the behaviour that I want.

Answer 1

document.getElementById only deals with elements in your document. Since gearImg is not a part of the document, it returns nothing. Try putting it somewhere first, for example:

 document.body.appendChild(gearImg)

(My DOM skills are rusty either, I’m not sure if this works this way. Why don’t we simply use jQuery?)