如何將內容添加到JavaScript中動態創建的div中？

Question

我有這樣的代碼，顯示一個鏈接「頁頂」時，向下滾動：

window.addEvent('load', function() { 
       new JCaption('img.caption'); 
      }); 
function fade_me(num){ 
    var smoothtop=document.id('smoothtop'); 
    if(smoothtop){smoothtop.fade(window.getScrollTop()<250?0:num);} 
} 
window.addEvent('domready',function(){ 
    var scroll=new Fx.Scroll(window,{ 
     'duration': 500, 
     'transition': Fx.Transitions.Bounce.easeInOut, 
     'wait':  false 
    }); 
    var smoothtop=new Element('div',{ 
     'id':  'smoothtop', 
     'class': 'smoothtop', 
     'style': 'position:fixed; display:block; visibility:visible; zoom:1; opacity:0; cursor:pointer; right:5px; bottom:5px;', 
     'title': '', 
     'html':  '', 
     'events':{ 
      mouseover: function(){fade_me(1);}, 
      mouseout: function(){fade_me(0.7);}, 
      click: function(){scroll.toTop();} 
     } 
    }).inject(document.body); 


    document.id('smoothtop').setStyle('opacity','0'); 
}); 
window.addEvent('scroll',function(){fade_me(0.7);}); 

//this is what I added 
var ii = document.getElementById('smoothtop'); 
ii.childNodes[0].nodeValue = '<i class="icon icon-chevron-up"></i>'; 
//these two lines 

正如你所看到的代碼生成ID爲smoothtop一個div。它有一個箭頭向上的圖片來表明頁面的頂部。相反，我想使用BootStrap的glyphicon使用

<i class="icon icon-chevron-up"></i> 

我試圖將此內容添加到div smoothtop。當我用FireBug檢查代碼時，它會顯示：

TypeError: ii is null 

var ii = document.getElementById('smoothtop'); 

我無法確定我在哪裏做錯了什麼？我想問一下如何將<i></i>添加到由js創建的div中？

Answer 1

鑑於您的例子，最簡單的方法是，當你創建元素使用html屬性：

var smoothtop=new Element('div',{ 
    'id':  'smoothtop', 
    'class': 'smoothtop', 
    'style': 'position:fixed; display:block; visibility:visible; zoom:1; opacity:0; cursor:pointer; right:5px; bottom:5px;', 
    'title': '', 
    'html':  '<i class="icon icon-chevron-up"></i>', // <-- right here 
    'events':{ 
     mouseover: function(){fade_me(1);}, 
     mouseout: function(){fade_me(0.7);}, 
     click: function(){scroll.toTop();} 
    } 
}).inject(document.body); 

Answer 2

如果動態地創建元素，試試這個：

var smoothtop=new Element('div',{ 
    'id':  'smoothtop', 
    'class': 'smoothtop', 
    'style': 'position:fixed; display:block; visibility:visible; zoom:1; opacity:0; cursor:pointer; right:5px; bottom:5px;', 
    'title': '', 
    'html':  '<i class="icon icon-chevron-up"></i>', 
    'events':{ 
     mouseover: function(){fade_me(1);}, 
     mouseout: function(){fade_me(0.7);}, 
     click: function(){scroll.toTop();} 
    } 
}).inject(document.body); 

這樣你就可以直接注入元素插入DOM樹，而不需要後來來填補它。

Answer 3

你的代碼是domready處理器之外，但創建該元素的代碼被置於其內domready處理程序。因此，在創建元素之前執行var ii = document.getElementById('smoothtop');。

只需將您的代碼放在您的domready處理程序的末尾，並且ii參考將不會是null。

此外，我強烈建議您使用庫的幫助程序類和函數來操作DOM，因爲您的庫可能會處理跨瀏覽器問題和其他煩惱。

然而，在香草JS，你可以這樣做：

var smoothtopEl = document.getElementById('smoothtop'), 
    i = document.createElement('i'); 

i.className = 'icon icon-chevron-up'; 
smoothtopEl.appendChild(i);