如何在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

以您的示例為例，最簡單的方法是在創建Element時使用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

您的代碼位於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);

Answer 3

動態創建元素時，請嘗試以下操作：

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樹中，而無需稍后填充。