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.

Answer 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 );
    }
}