Question

I’m setting up a form that will dynamically create a text field and append it to the table. The name of the text field is an array, so it contains brackets. The code below doesn’t append the input field, rather, it spits back [object HTMLInputElement]. I’m assuming it’s because of the brackets? Is there a way to do this?

//HTML
<table id="notesplus" cellpadding="0" cellspacing="0">
<thead></thead>
<tbody></tbody>
</table>

//JQUERY
$(document).ready(function() {
  $('input[id=addIt]').live('click', function() {
     addPlus();
  });
});

function addPlus() {
  var item = document.createElement("textarea");
  item.setAttribute("name", "section[0][aplus]"+mycount+"[notes]");

  var sRow1 = $('<tr>').appendTo('table#notesplus tbody');
  var sCell1 = $('<td>').html(item).appendTo(sRow1);
}

Answer 1

At the moment you are trying to using html to insert an HTML object – but jQuery expects to receive an HTML string here and so converts your object to text before appending it to your cell.

Change the last line to:

var sCell1 = $('<td>').append(item).appendTo(sRow1);