Добавление динамического HTML, сгенерированного jQuery на HTML-страницу

Question

Я использую сценарий jQuery, который добавляет HTML к <div> на моей странице HTML.

Что должно произойти, что, когда я нажимаю на btnAddObj, он добавляет сгенерированный HTML в DIV с идентификатором objGroup.

Эта кнопка, похоже, работает, но она помещает сгенерированный 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++; 

    }); 

Ниже приведен пример выходного сигнала, если смотреть в Firebug. И я не вижу странный CSS, как Z-индекс, который вызвал бы он будет отображаться ниже:

<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 /> элемент и добавил <tbody> внутри вашего <table>. Кроме того, я немного очистил HTML внутри вашего JavaScript (как правило, это не очень хорошая идея, если у вас есть не просто несколько элементов). Не удалось найти ничего.

Если это не так, я подозреваю проблемы в окружающем 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++; 
});