Creating and adding nested div elements with the power of JavaScript

Question

Creating and adding nested div elements with the power of JavaScript

My goal is to utilize JavaScript for updating the CSS layout as the webpage loads. Below is the code I have been working on:

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

var article = 0; 
var articleTitle = 0;

var divName = 0; // Temporary variable for article id names
var divNameT = 0; // Temporary 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;
        // SET UP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        setNewsTitle(count,divName); // Call function 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;
    // SET UP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

Everything works fine when I compile my code without including the call to function setNewsTitle(count,id). However, the problem arises when this function call is included - the page shows up blank with no content displayed.

I attempted to attach screenshots for better clarity, but unfortunately, I do not yet have sufficient reputation to do so.

javascript css html

Answer 1

Answer №1

Give it a shot...

    Add the article to the container.
    Call the function setNewsTitle with parameters x and divName to set the title panel.

Make sure the article is added before running the setNewsTitle function, as it looks for the element by id. Also, remember that you should use x instead of count...

Check out this example on jsFiddle: http://jsfiddle.net/examplelink123/

Answer 2

Give it a shot...

    Add the article to the container.
    Call the function setNewsTitle with parameters x and divName to set the title panel.

Make sure the article is added before running the setNewsTitle function, as it looks for the element by id. Also, remember that you should use x instead of count...

Check out this example on jsFiddle: http://jsfiddle.net/examplelink123/

Answer 3

Answer №2

For a different approach, consider using the appendChild method in the DOM structure before calling the setNewsTitle function. Additionally, replace the count variable with x :

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

var article = 0; 
var articleTitle = 0;

var divName = 0; // Temporary variable for article IDs
var divNameT = 0; // Temporary variable for title IDs

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); // Call function 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);
}

Answer 4

For a different approach, consider using the appendChild method in the DOM structure before calling the setNewsTitle function. Additionally, replace the count variable with x :

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

var article = 0; 
var articleTitle = 0;

var divName = 0; // Temporary variable for article IDs
var divNameT = 0; // Temporary variable for title IDs

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); // Call function 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);
}

Answer 5

Answer №3

Your code has a couple of issues that need addressing:

One problem is that you haven't added the element to the DOM yet, causing document.getElementById in your setNewsTitle() function to not find anything.
Another issue lies in the method call to setNewsTitle(count,id). You are passing "count", which does not exist. Instead, you should be calling it as setNewsTitle(x, divName), but only after the call to container.appendChild(article).

The revised setLayout function would look 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);
        // Pass "X" instead of count
        setNewsTitle(x,divName); // Call function to set Title Panel
    }
}

Answer 6

Your code has a couple of issues that need addressing:

One problem is that you haven't added the element to the DOM yet, causing document.getElementById in your setNewsTitle() function to not find anything.
Another issue lies in the method call to setNewsTitle(count,id). You are passing "count", which does not exist. Instead, you should be calling it as setNewsTitle(x, divName), but only after the call to container.appendChild(article).

The revised setLayout function would look 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);
        // Pass "X" instead of count
        setNewsTitle(x,divName); // Call function to set Title Panel
    }
}

Creating and adding nested div elements with the power of JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Changing the color of a pressed Bootstrap 4 button

Implementing the adding functionality within an ejs file

Unfortunate Outcome: CSS Request Results in 404 Error

jQuery draggable elements can be easily dropped onto droppable areas and sorted

mobile screens causing bootstrap columns to overlap

The results returned by the jQuery find() function vary across various pages

React Select only enabling single selection at a time

Utilize Angular's $location to add or update the current URL parameter

Issue with margin-top in combination with clear:both does not function as expected

AngularJS ng-repeat - cascading dropdown not refreshing

Ways to unlock all the information windows in Google Maps

Guidance on incorporating static files with Spring MVC and Thymeleaf

Leverage the Express JS .all() function to identify the specific HTTP method that was utilized

Having trouble uploading the file to Firebase storage

Alert: The lack of boundary in the multipart/form-data POST data has been detected in an unknown source on line

Arranging HTML Lists in Perfect Order

"Implementing a dynamic search for IMG SRC using ng-src in AngularJS: a step-by-step

I'm having trouble making a Javascript ajax request to my Web API controller page. It seems like I just can't figure out the correct URL

Python and website submission button without an action attribute

What category does React.js fall under - library or framework?