Question

I keep learning very simple things about functions, returns, id and everything, so I ran into another problem that looks simple, but I cannot understand why it happens. Check this code:

function test() {
    var text = document.createTextNode("Hello");
    text.id = "t";
    }


var whatIjustwrote = window.document.getElementById("t");
alert(whatIjustwrote);​

Does the getElementById has restrictions to look only for global items? What would be the way to make that alert output the text node inside the function?

Thank you for any comment. The last few days asking things here I have been learning quite a lot!

JSFiddle

Answer 1

Firstly, getElementById will only return an element, and you’re creating a text node.

Secondly, it will only return an element that has been added to the DOM. The node you create doesn’t get added to the DOM, so it wouldn’t be found even if it could be.

Finally, you don’t actually call the test function, so the text node isn’t even created in memory.

Here’s an updated fiddle that demonstrates getElementById actually working:

function test() {
    var text = document.createElement("span"); //Create an element
    text.innerHTML = "Hello";
    text.id = "t";
    document.body.appendChild(text); //Add it to the DOM
}

test(); //Invoke the function (so the element actually gets created)
var yourElement = document.getElementById("t"); //Get reference to element