Appending multiple items using jQuery

Question

I start with this markup:

<div>
  <span>
    <label for="Item[0]">Item #1</label>
    <input type="text" value="" name="Item" id="Item[0]"/>
  </span>
</div>

On each button click I want to add another section exactly as the one above but with an incremented index.

<div>
  <span>
    <label for="Item[0]">Item #1</label>
    <input type="text" value="" name="Item" id="Item[0]"/>
  </span>
</div>
<div>
  <span>
    <label for="Item[1]">Item #2</label>
    <input type="text" value="" name="Item" id="Item[1]"/>
  </span>
</div>

I'm trying to use this javascript:

 $(document).ready(function(){

    var count = <%= Items.Count - 1 %>;

    $('#AddItem').click(function(e) {
        e.preventDefault();
        count++;

        var tb = $('#Item[0]').clone().attr('id', 'Item[' + count + ']');

        var label = document.createElement('label')
        label.setAttribute('For', 'Item[' + count + ']')

        $('#ItemFields').append(label);
        $('#ItemFields').append(tb);
    });
});

So a few issues:

Appending the label works, but my cloned textbox does not.

The label has no text. I can't seem to find the property for that. Can anyone tell me what it is?

I can't figure out how to wrap the label and textbox together in a div and span. If I try

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

it outputs [object HTMLLabelElement] instead of the actual label. If I try to split them up into multiple append statements, it self terminates the div and span. I'm new to jQuery/Javascript, so I'm not quite sure what I'm doing wrong.

Answer 1

I think I'd find a way to extract the next number from the existing ones in the mark up rather than relying on keeping variable in sync. Also, I think you simply need to nest your appends properly to get the containment that you want.

$(document).ready(function(){

    $('#AddItem').click(function(e) {
        var count = $('[name=Item]:last').attr('id').replace(/Item\[/,'').replace(/\]/,'');
        count = Number(count) + 1;

        var newItemID = 'Item[' + count + ']';

        var tb = $('#Item[0]').clone();
        tb.attr('id', newItemID );

        var label = $('<label for="' + newItemID + '">Item #' + count + '</label>');

        var container = $('<div></div>');

        $('<span></span>').append(label)
                          .append(tb)
                          .appendTo(container);

        $('#ItemFields').append(container);
        return false;
    });
});

Answer 2

To start with "what's wrong," you're mixing native DOM calls, jQuery, and something else (I have no clue what <%= Items.Count - 1 %> is - PHP, maybe?). I'll leave that last one alone, as it sounds like it's working for you. Otherwise, if you're going to use jQuery, try and stick to using its methods as much as possible.

The "property" for the label's text is just the value, which is get/set by the jQuery value() method.

To append the label, I'd recommend you do it like:

$('#ItemFields').append('<label for=Item["' + count + ']">'+ '</label>')

I know append can take text, a jQuery object, or a DOM element, but I personally prefer to do it all with strings. If you'd rather not, you can do this:

$('#ItemFields').append($('<label></label>')
    .attr('for', 'Item["' + count + ']')
    .value('your label text here'));

and so on.

The reason that

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

didn't give you what you wanted is that you are concatenating Javascript objects with strings, which (like Java) will automatically convert the objects to strings before concatenating.

I'm leaving the rest of this answer incomplete since tvanfosson's answer should cover it.

Answer 3

Use a function to build your html; if the structure is simple, assembling it as a string is easier:

$(document).ready(function(){

    var count = <%= Items.Count - 1 %>;

    $('#AddItem').click(function(e) {
        e.preventDefault();
        count++;

        $('#ItemFields').append(create_item(count));
    });


    function create_item(i) {
        return $(['<div><span>'
                ,'<label for="Item[', i, ']">Item #', i, '</label>'
                ,'<input type="text" value="" name="Item" id="Item[', i ,']"/>'
            ,'</span></div>'].join(''), document);
    };
});

Answer 4

var oldDiv = $('whatever');//Get div here somehow
var newHTML = $( oldDiv ).html();
newHTML.replace(/\[[0-9]+\]/g, '['+count+']');
newHTML.replace(/#[0-9]+/g, '#'+(count+1));    
var newDiv = $('<div></div>').html( newHTML );

This will create a new div, grab the HTML from oldDiv, and perform two regex replaces for the [index] and #number areas. I've not tested it, but it should work with few modifications.

Answer 5

Example cloning the whole block (but adding an item class) because I think it's more robust for the future (if you change the html for an item e.g.) and handling the label's text:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demo</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('#AddItem').click(function(e) {
      e.preventDefault();

      var count = $('.item').length;
      var id = 'Item[' + count + ']';
      var item = $('.item:first').clone();
      item.find('input:first').attr('id', id);
      item.find('label:first').attr('for', id)
          .html('Item #' + (1+count));
      item.appendTo('#ItemFields');
    });
  });
  </script>
</head>
<body>
  <input type="button" id="AddItem" value="Add" />
  <div id="ItemFields">
    <div class="item">
      <span>
        <label for="Item[0]">Item #1</label>
        <input type="text" value="" name="Item" id="Item[0]"/>
      </span>
    </div>
  </div>
</body>
</html>