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