CODEWITHSUNDEEP
javascripthtml
zkanoca
zkanoca

Reputation: 9918

How to add content into a dynamically created div in JavaScript?

I have this code which shows a 'Top of the page' link when scroll down:

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

As you can see the code generates a div with id smoothtop. It has a arrow-up picture to indicate the top of the page. Instead, I want to use BootStrap's glyphicon using

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

I have tried to add this content to div smoothtop. When I inspect the code with FireBug, it says:

TypeError: ii is null

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

I couldn't figure where and/or what am I doing wrong? I want to ask how I can add <i></i> into the div which has been created by js?

Upvotes: 0

Views: 966

Answers (3)

plalx
plalx

Reputation: 43718

Your code is outside the domready handler, but the code that creates the element is placed inside the domready handler. Therefore, var ii = document.getElementById('smoothtop'); is executed before the element was even created.

Just put your code at the end of your domready handler and the ii reference won't be null.

Also, I would strongly advise you to use your library's helper classes and functions to manipulate the DOM since your library will probably deal with cross-browser issues and other annoyances.

However, in vanilla JS, you could do:

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

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

Upvotes: 2

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

Given your example, the easiest way would be to use the html property when you create the Element:

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

Upvotes: 3

naloxx
naloxx

Reputation: 221

When creating the element dynamically, try this:

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

This way you can inject the element directly into the DOM tree without the need to fill it later.

Upvotes: 1

Related Questions