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

Question

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?

André Dion · Accepted Answer · 2013-08-28 14:03:45Z

3

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

answered Aug 28, 2013 at 14:03

André Dion

21.8k7 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

plalx · Accepted Answer · 2013-08-28 14:12:11Z

2

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

edited Aug 28, 2013 at 14:12

answered Aug 28, 2013 at 14:05

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Comments

naloxx · Accepted Answer · 2013-08-28 14:03:33Z

1

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.

answered Aug 28, 2013 at 14:03

naloxx

2211 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related