javascript 动态添加div

Add div Dynamically

提问by mkyong

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 cellthat 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.

我有一个表，当新用户变得活跃时，它会动态添加行。该函数将添加一个显示用户姓名的新行和一个激活灯箱以显示更多信息的按钮。名称和按钮放在一个单元格中，但我想右对齐按钮并左对齐单元格内的名称。我发现这篇文章在同一个 HTML 表格单元格中右对齐和左对齐文本，它展示了如何用 HTML 中的 div 来做到这一点，但我需要动态地做到这一点。有人猜吗？我尝试了以下代码，它可以工作，但不能证明我想要的名称和按钮是正确的。它只是将它们集中在细胞内。我很感激任何帮助。

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

采纳答案by GregL

The problem is that you need to place the username and button insidethe 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.

问题是您需要将用户名和按钮放置在您创建的浮动 div 中，而您将它们放置在与 div 相同的单元格中，但与 div 处于同一级别。

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.

此外，如果要添加超过 1 行，div 将获得“左”和“右”的重复 ID。改用类。

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.

最后，您不需要将 rightDiv 的宽度设置为 50%。如果这是您所追求的，它应该会自动右对齐。

回答by Vinod

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

回答by Ved

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

不是单独给出 css 规则，而是直接使用 css 规则集，如下所示：

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

And create rule set div_class like this in your css :

并在您的 css 中创建这样的规则集 div_class ：

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