將jQuery生成的動態HTML添加到HTML頁面

Question

我正在使用將HTML添加到我的HTML頁面中的<div>的jQuery腳本。

應發生什麼情況，就是當我點擊btnAddObj，它增加了生成的HTML到div與objGroup的ID。

該按鈕似乎工作，但它將生成的HTML放在我的HTML的所有內容後面，以便我看不到它。

是否有一種方法可以正確插入它，以便生成的HTML進入正確的<div>並且還會根據需要增加div的高度？

由於

 <div class="span"> 
      <input type='button' value='Add Obj' id="btnAddObj"> 
       <div id="obj" style="height: 100%;" data-courseid="<%=NCourse.ID%>"> 
        <div id="objGroup" style="height: 100%;" runat="server" clientIdMode="Static"></div> 
       </div> 
     </div> 

    var counter = 1; 
    $("#btnAddObj").on("click" ,function() { 

    var newTextBoxDiv = $("<div>").attr("id", 'obj' + counter); 

    newTextBoxDiv.html(
     "<table><tr><td>" + 
     "<label><img style='padding: 0; margin: 0;' src='./images/drag.png' /></label>" + 
     "</td><td>" + 
     "<textarea id='tbObj_" + counter + "' name='txtObj' class='obj' sequence='" + counter + "' rows='2' cols='30'></textarea>" + 
     "</td>" + 
     "<td><div class='removeObj'><label class='deleteLabel'>x</label></div></td></tr></table>"); 
    newTextBoxDiv.appendTo("#objGroup"); 

    counter++; 

    }); 

這裏是螢火蟲觀看的輸出的一個示例。而且我沒有看到任何奇怪的CSS一樣的z-index會導致它在下面顯示：

<div class="span"> 
    <input id="btnAddObjective" type="button" value="Add Objective"> 
     <div id="objectives" data-courseid="15131046" style="height: 100%;"> 
     <div id="objectivesGroup" class="ui-sortable" style="height: 100%;"> 
      <div id="objective1"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <label> 
           <img src="./images/drag.png" style="padding: 0; margin: 0;"> 
          </label> 
          </td> 
          <td> 
          <textarea id="tbObjective_1" class="objectives" cols="30" rows="2" sequence="1" name="txtObjective"></textarea> 
          </td> 
          <td> 
         </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

Answer 1

做工精細，我在這裏：http://jsfiddle.net/u3mYm/2/

我關上了<input />元素，並添加您的<table>內部的<tbody>。另外，我在JavaScript中清理了一下HTML（如果你不僅僅只有幾個元素，通常不是個好主意）。找不到任何東西。

如果這不是，我懷疑周圍的CSS或HTML的問題。你能向我們展示一個獨立的例子，它不起作用嗎？

<div class="span"> 
    <input type='button' value='Add Obj' id="btnAddObj" /> 
    <div id="obj" style="height: 100%;" data-courseid="<%=NCourse.ID%>"> 
     <div id="objGroup" style="height: 100%;" runat="server" clientIdMode="Static">Foo</div> 
    </div> 
</div> 

的JavaScript：

var counter = 1; 

$("#btnAddObj").on("click" ,function() { 

    var newTextBoxDiv = $("<div>").attr("id", 'obj' + counter); 

    newTextBoxDiv.html([ 
     "<table>", 
      "<tbody>", 
      "<tr>", 
       "<td>", 
       "<label><img style='padding: 0; margin: 0;' src='./images/drag.png' /></label>", 
       "</td>", 
       "<td>", 
       "<textarea id='tbObj_", counter, "' name='txtObj' class='obj'", 
        "sequence='", counter, "' rows='2' cols='30'>", 
       "</textarea>", 
       "</td>", 
       "<td>", 
       "<div class='removeObj'><label class='deleteLabel'>x</label></div>", 
       "</td>", 
      "</tr>", 
      "</tbody>", 
     "</table>"].join("")); 
    newTextBoxDiv.appendTo("#objGroup"); 

    counter++; 
});