Dynamically Created HTML elements (via Javascript) not accessible via getElementById()

Question

This question follows my previous question here in case anyone is interested.

I am creating a window via window.open() then calling this function (from within the child window) when the window has loaded (via onload). This function, which I borrowed from a tutorial, basically creates tabbed text areas.

function appendToBody(){
    for (moduleName in codes){
        //create text area
        console.log(moduleName+' creating text area');
        var textArea = document.createElement('textarea');
        textArea.setAttribute('rows', '30');
        textArea.setAttribute('cols', '105');
        textArea.value = codes[moduleName];
        console.log(textArea);

        //create div
        console.log(moduleName+' creating div');
        var div = document.createElement('div');
        div.setAttribute('class', 'tabContent');
        div.setAttribute('id', moduleName);
        div.appendChild(textArea);
        console.log(div);

        //create link
        console.log(moduleName+' creating link');
        var link = document.createElement('a');
        link.setAttribute('href', '#' + moduleName);
        console.log(link);

        //add link to li
        console.log(moduleName+' adding link to li');
        var li = document.createElement('li');
        li.appendChild(link);
        console.log(li);

        //add li to ul
        console.log(moduleName+' Adding li to ul');
        var ul = document.getElementById('tabs');
        ul.appendChild(li);
        console.log(ul);
    }
  foo();
}

The function foo then does some preprocessing and looks like so (I mostly copy pasted this code)

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

    // Grab the tab links and content divs from the page
    var tabListItems = document.getElementById('tabs').childNodes;
    for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
            var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
            var id = getHash( tabLink.getAttribute('href') );
            tabLinks[id] = tabLink;
            contentDivs[id] = document.getElementById( id );
        }
    }
}

document.getElementById('tabs') works as tabs is hard coded in the document body, but document.getElementById( id ), which was dynamically created, returns null. I checked the names and they are identical. Is there anything extra I need to consider when dynamically creating elements.

You checked the names, but did you check the id's (through console.log or some such)? — cwallenpoole, Jul 25 '11 at 19:08
what browser are you using? Most browsers come with a developer tools feature which can be very handy for debugging this kind of thing. You should be able to use it to see what the element actually looks like in the DOM, which may help you see where you're going wrong. — Spudley, Jul 25 '11 at 19:12
I am using chrome, and I have to admit I have never tried the debugging tools — puk, Jul 25 '11 at 19:12
cwallenpoole, I am printing the actual elements out as I create them, so it shows all the attributes, including the 'id's, then comparing those with the `id` in `getElementById(id)`. I should have made this clear — puk, Jul 25 '11 at 19:14
is there any way to get a list of all the elements in a document/window? — puk, Jul 25 '11 at 19:16

score 1 · Accepted Answer · answered Jul 25 '11 at 19:20

1

You have mistaken "nodeName" for "tagName" in your init function's if. Beware that childNodes will return all nodes (other DOM elements AND text nodes) and I'm pretty sure that text nodes do not have a tagName property, so you'd likely get a javascript error there. I suggest 2 changes. Instead of childNodes, use children (just the DOM elements). And instead of nodeName use tagName:

var tabListItems = document.getElementById('tabs').children;
for ( var i = 0; i < tabListItems.length; i++ ) {
    if ( tabListItems[i].tagName == "LI" ) {
        var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
        var id = getHash( tabLink.getAttribute('href') );
        tabLinks[id] = tabLink;
        contentDivs[id] = document.getElementById( id );
    }
}

answered Jul 25 '11 at 19:20

James

20,957
5
26
41

I made those changes, although they did not solve the immediate problem. One thing to note, when I dump all elements in `documents.all` to `console.log`, I notice none of them have the id attribute even though I set the attributes with `setAttribute('id', name)`. Any idea why that is? – puk Jul 25 '11 at 19:36
the only ones that have ids are the divs, and it looks like they are not being appended to anything (so therefore not in the document). You need to add something.appendChild(div) after creating each div. – James Jul 25 '11 at 19:45
I'm such an idiot. The problem is that I went from a static implementation to a dynamic one so I forgot that by declaring a div in the body it also gets appended – puk Jul 25 '11 at 20:04

Dynamically Created HTML elements (via Javascript) not accessible via getElementById()

1 Answers1