Add div Dynamically

Question

I have a table that adds rows dynamically as new users become active. The function will add a new row that displays the user's name and a button that activates a lightbox to show more information. The name and button are put in a single cell, but I'd like to right align the button and left align the name within the cell. I found this post Right align and left align text in same HTML table cell that shows how to do it with divs in HTML, but I need to do this dynamically. Anyone have a guess? I tried the following code, it works, but doesn't justify the name and button how I'd like. It just centers them within the cell. I'd appreciate any help.

function addRow(tableID, user, phone, age, city, zipCode) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {

         tabbody=document.getElementsByTagName("tbody").item(2);
         cell1 = document.createElement("TD"); //Create New Row
         leftDiv = document.createElement("div"); //Create left div
         leftDiv.id = "left"; //Assign div id
         leftDiv.setAttribute("style", "float:left;width:50%;"); //Set div attributes

         rightDiv = document.createElement("div"); //Create right div
         rightDiv.id = "right"; //Assign div id
         rightDiv.setAttribute("style", "float:right;width:50%;"); //Set div attributes

         user_name = document.createTextNode(user + ' '); //Set user name

         details_btn = document.createElement("button"); //Create details button
         btn_txt = document.createTextNode("Details"); //Create button text
         details_btn.appendChild(btn_txt);  //Add "Details" to button text
         details_btn.onclick = function(){moreInfo(user, phone, age, city, zipCode);}; //Assign button function

         cell1.appendChild(leftDiv);
         cell1.appendChild(user_name); //Add name to row
         cell1.appendChild(rightDiv);
         cell1.appendChild(details_btn); //Add button to row
         row.appendChild(cell1); //Add row to table
         tabbody.appendChild(row);

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
}

Vinod · Answer 1 · 2012-02-24T09:40:21.863

2

Try this:

function creatediv() {
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.style.width = 300;
    newdiv.style.height = 300;
    newdiv.style.position = "absolute";
    newdiv.style.background = "#C0C0C0";
    newdiv.innerHTML = "Dynamic Div";
    document.body.appendChild(newdiv);
}

edited Feb 24 '12 at 09:40

answered Feb 24 '12 at 09:34

Vinod

4,672
4
19
26

score 1 · Accepted Answer · answered Feb 24 '12 at 09:44

The problem is that you need to place the username and button inside the floating divs you have created, whereas you have placed them in the same cell as the div, but at the same level as the divs.

So try changing this section:

 cell1.appendChild(leftDiv);
 cell1.appendChild(user_name); //Add name to row
 cell1.appendChild(rightDiv);
 cell1.appendChild(details_btn); //Add button to row
 row.appendChild(cell1); //Add row to table
 tabbody.appendChild(row);

to this:

 leftDiv.appendChild(user_name); // Add name to left div
 rightDiv.appendChild(details_btn); // Add button to right div
 cell1.appendChild(leftDiv);
 cell1.appendChild(rightDiv);
 row.appendChild(cell1); //Add row to table
 tabbody.appendChild(row);

Also, if more than 1 row is going to be added, the divs will get duplicate IDs of "left" and "right". Use a class instead.

Finally, you shouldn't need to set the width of the rightDiv to 50%. It should automatically right-align itself, if that is what you are after.

score 0 · Answer 3 · answered Feb 24 '12 at 09:39

0

Instead of giving css rules individually, use css rule set directly like this :

div.className = "div_class_right/left";  //for creating right/left div respectively.

And create rule set div_class like this in your css :

.div_class_right/left{
    float : right/left;
    width : 50%;
}

answered Feb 24 '12 at 09:39

Ved

8,577
7
36
69

This is the best way. It is only missing one rule: `text-align: right/left`. `float` itself does not align text in `DIV`. – Teemu Feb 24 '12 at 09:52
thanks for the correction,You may be right but the poster want to align DIV itself to its parent TD and not the text-align to the div. – Ved Feb 24 '12 at 09:59
Was he? "I'd like to right align the button and left align the name..." Sounds to me, that he wants to place the button on the right side of the cell and the name on the left side of the same cell. DIVs are only necessary to achieve this. – Teemu Feb 24 '12 at 10:13

Add div Dynamically

3 Answers3