Question

我正在尝试动态构建一些HTML。作为div的HTML，其中有一个表，在表的一列之内，还有另一个表。

目前，我正在使用jquery的.append方法，这似乎不起作用。我得到＆＃34;无法获得未定义的子节点的属性＆＃34;。该应用程序仅使用IE。我能指出正确的方向吗？我在这里做错了什么？

 $("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
    $("<tr>" + "<td>" +
    "<table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
    "<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
    "<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
    "</tr>" +
    "</table></td></tr></table></div>").append("MainDiv");

Answer 1

你很近但不完全在那里。

$('MainDiv').append('some html here')

.append方法的工作方式是你有一个选择器：

$('MainDiv')

这会选择一些你可以使用的DOM元素，然后在其上调用.append方法：

$('Some Selector').append('Some HTML');

这会将append（）表示的html插入选择器$（'Some Selector'）的最后一个子元素，更多信息可以在here找到。

您可能还需要考虑将要添加的所有HTML放入一个字符串数组中，然后可以循环并将它们中的每一个附加到某个元素。这不是实现目标的最佳方法，但却是理解jQuery及其某些DOM操作方法的好方法。

Answer 2

您可以使用append()之类的：

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
    "<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
    "<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

希望这有帮助。

注意：我建议为所有td之间的共享样式创建一个类，以便代码更具可读性：

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td style='width:70px;' class='col' nowrap>ID</td>" +
    "<td style='width:100px' class='col'>Name</td>" +
    "<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);

.col{
  background-color: #999999;
  font-weight: bold;
  color: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

如何使用jquery动态构建复杂的HTML

2 个答案: