如何使用jQuery動態構建復雜的HTML

Question

我正在嘗試動態構建一些HTML。作為div的HTML，在其中有一個表，在該表的一列之內，還有另一個表。

目前，我正在使用jquery的.append方法，但似乎沒有用。 我收到“無法獲取未定義子節點的屬性”的信息。該應用程序僅使用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'）的最后一個子元素，有關更多信息，請參見此處 。

您可能還需要考慮將要添加的所有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>