Creating Filled DIVs using JavaScript

Question

Creating Filled DIVs using JavaScript

Although it may appear to be a common inquiry, my specific needs have not been addressed in any of the Stack threads I've come across.

I am dealing with a series of nested DIV statements, as demonstrated here (not all CSS included).

I am looking to create a basic script that can carry out the following:

for (i = 0; i < data.length(); i++) {
  //append DIV
  //add identifying class/id
  //change text values
}

If it helps, I am using d3.js for a few visualizations alongside these DIVS. If it would be easier, I can generate those DIVs in d3, but I'm unsure about how to go about it. Any advice or suggestions would be greatly appreciated. Thank you!

javascript css html d3.js

Answer 1

Answer №1

To generate multiple divs as children of another element, you can create new elements and then attach them to the DOM as children.

Suppose there is a main element on the webpage

<div id="myDiv">
    <p>This should be the starting point</p>
</div>

You can then add any number of elements using code like this:

for (a=0;a<3;a++) {
    var divTag = document.createElement("div"); 
    divTag.id = "div"+a; 
    divTag.setAttribute("align", "center"); 
    divTag.className = "myClass"; 
    divTag.innerHTML = a+" New div tag dynamically created."; 
    document.getElementById("myDiv").appendChild(divTag); 
}

Answer 2

To generate multiple divs as children of another element, you can create new elements and then attach them to the DOM as children.

Suppose there is a main element on the webpage

<div id="myDiv">
    <p>This should be the starting point</p>
</div>

You can then add any number of elements using code like this:

for (a=0;a<3;a++) {
    var divTag = document.createElement("div"); 
    divTag.id = "div"+a; 
    divTag.setAttribute("align", "center"); 
    divTag.className = "myClass"; 
    divTag.innerHTML = a+" New div tag dynamically created."; 
    document.getElementById("myDiv").appendChild(divTag); 
}

Creating Filled DIVs using JavaScript

Answer №1

Similar questions

Ways to resolve the issue of code not relocating the channel within a specific

Is it possible to retrieve event.data beyond the onMsg callback function in JS SSE?

What benefits do Adobe Creative Cloud apps offer for developing interactive content in AEM?

Despite functioning properly when triggered from the debug console, the jQuery AJAX request fails to work upon page load

The character replacement function does not seem to be functioning properly in DialogFlow following the use of

Save the HTML elements in an object and then use the ng-include directive to include the template

Tips for adjusting the font size on the Google Maps mapType controller

Send PHP data through AJAX and retrieve it on a different PHP page

The created hook does not execute when navigating to the same route with a different query parameters

Changing the name of a React Native sample application

Where do the props in React come from?

Using NodeJS and EJS to Display MySQL Query Results

Lazy loading Angular component without route - Form control name has no value accessor

Inserting data into a table using variables in Mssql database management system

While attempting to utilize inner class functions in Node JS, an error is being encountered

Removing a data entry from a PHP-generated MySQL table

Verify if an element with a specific index exists within an array

ReactJS component disappearing behind the Navbar

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

Guide to integrating react-phone-number-input into material-ui TextField