Question

如果有人有兴趣，请回答我之前的问题here。

我正在通过window.open()创建一个窗口，然后在窗口加载时（通过onload）调用此函数（在子窗口内）。我从教程中借用的这个函数基本上创建了选项卡式文本区域。

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

函数foo然后进行一些预处理并且看起来像这样（我主要是复制粘贴此代码）

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')的工作原理tabs在文档正文中进行了硬编码，但动态创建的document.getElementById( id )返回null。我检查了名字，它们是相同的。在动态创建元素时，我还需要考虑一些额外的内容。

Answer 1

你在init函数的if中错误地将“nodeName”作为“tagName”。请注意，childNodes将返回所有节点（其他DOM元素和文本节点），我很确定文本节点没有tagName属性，因此您可能会在那里收到javascript错误。我建议2个改变。而不是childNodes，使用子节点（只是DOM元素）。而不是nodeName使用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 );
    }
}

无法通过getElementById（）访问动态创建的HTML元素（通过Javascript）

1 个答案: