Using JavaScript to create and append nested div elements

Question

I am trying to use JavaScript to update the CSS layout as the webpage loads. My code looks like so:

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        setNewsTitle(count,divName); // Function Call to set Title Panel

        container.appendChild(article);
    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

When I compile my code without making the call to function setNewsTitle(count,id) all the CSS elements are working fine. The issue I am facing here is whenever the function call is made, my page appears blank. Nothing displays on the screen.

I tried adding screenshots for better understanding, but i don't have the reputation yet.

Did you try firebug ? You can also try setting display to block instead of inline .. just in case — Andy897
– Andy897, Commented Jan 5, 2015 at 18:43
@Andy897: Yes I've tried firebug. Also did inline, inline-block and block display... none worked. — Samuel Resberg
– Samuel Resberg, Commented Jan 5, 2015 at 18:46
Always check your console when js isn't working. You should find that your js is blowing up because containerTitle is undefined (hint: it hasn't been added to the dom yet). — James Montagne
– James Montagne, Commented Jan 5, 2015 at 18:46

bob-fornal · Accepted Answer · 2015-01-05 18:48:46Z

1

Try ...

    container.appendChild(article);
    setNewsTitle(x,divName); // Function Call to set Title Panel

The article needs to be in place before setNewsTitle is run, since you are looking for the element by id. Also, you do not have count, you have x ...

jsFiddle: http://jsfiddle.net/rfornal/o1wyae74/

answered Jan 5, 2015 at 18:48

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

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

1 Comment

bob-fornal Over a year ago

Glad I could help and that the solution was simple!

Vaibhav J · Accepted Answer · 2015-01-05 18:53:45Z

Try this, append child in DOM before call funtion setNewsTitle, replace count with x :

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        container.appendChild(article);

        setNewsTitle(x,divName); // Function Call to set Title Panel

    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

trenthaynes · Accepted Answer · 2015-01-05 19:02:42Z

You have 2 issues in your code:

You have not actually added the element to the DOM yet, so when you attempt document.getElementById in your function setNewsTitle() - it won't find anything.
You have an error in the method call to setNewsTitle(count,id). You are passing "count", but count doesn't exist. You need to call it as setNewsTitle(x, divName) but only AFTER you have made the call to container.appendChild(article).

The setLayout function would end up something like this:

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        // Add it to the DOM first
        container.appendChild(article);
        // need to pass "X", not count
        setNewsTitle(x,divName); // Function Call to set Title Panel
    }
}

Collectives™ on Stack Overflow

Using JavaScript to create and append nested div elements

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related