getElementById（）経由で動的に作成されたHTML要素（JavaScriptを介して）にアクセスできない

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