getElementById of something inside a function, but from outside

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

Answer 2

getElementById does only search for element nodes. You did create a text node, which has neither attributes nor an id - you just added a custom property to the JS object. Also, you did not append your node to the document, so it couldn't have been found in the DOM tree.

You might want to read an introduction to the DOM (at MDN), the introduction at quirksmode.org or even the W3 standard itself (especially the introduction section)

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

var yourElement = document.getElementById("t"); // Get the element from the DOM
alert(yourElement.textContent); // alerts "Hello"
// you also could have alerted yourElement.firstChild.data - the content of the 
// textnode, but only if you had known that yourelement really has a firstchild

(Demo at jsfiddle.net)

Answer 3

Does the getElementById has restrictions to look only for global items?

The answer is no. First you have to define global items anyways. Anything that is attached to the DOM is in fact global, and in terms of global javascript objects there is only one, window, in the case of a browser. You are creating a function but you're never executing it.

In addition the text node cannot actually have an id or any other attribute. You need an element for this, so even if you execute the function you would still get null. Also creating a node does not attach is to the DOM, so you won't be able to access it even if this isn't a text node.

I have updated your fiddle.

Answer 4

A couple of points that come to mind..

1) You cant give a textNode an id attribute (you're actually giving it a new member variable named id) 2) To find an element it must exist in the document's DOM

Do this instead:

var mSpan = document.createElement('span');
mSpan.id = 't';
mSpan.appendChild( document.createTextNode('Hello') );
document.body.appendChild(mSpan);

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