Adding dynamic HTML generated by jQuery to an HTML page

Question

I am using a jQuery script that adds HTML to a <div> in my HTML page.

What should happen, is that when I click on the btnAddObj, it adds the generated HTML to the div with an ID of objGroup.

The button seems to work, but it is putting the generated HTML behind all the content on my HTML so that I can't see it.

Is there a way to insert it correctly so that that the generated HTML goes into the correct <div> and also causes the height of the div to grow as needed?

Thanks

        <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++;

    });

Here is a sample of the output viewed in Firebug. And I don't see any strange CSS like z-index that would cause it be displayed below:

<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

Working fine for me here: http://jsfiddle.net/u3mYm/2/

I closed the <input /> element and added the <tbody> inside your <table>. Also, I cleaned up the HTML inside your JavaScript a bit (generally not a good idea if you have more than just a few elements). Could not find anything.

If that's not it, I suspect the problems in the surrounding CSS or HTML. Could you show us a self-contained example, where it does not work?

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