Question

Hello Stack Overflow i hope you are well today,

I have this code:

  $('.add_child').click(function(){
    var attrName = $(this).attr('name');
    var count = $(this).attr('count');
    $(this).attr('count', (parseInt(count)+1))
    var input = $('<input />');
    input.attr('type','text')
    input.attr('name',attrName+"["+count+"]" ) 
    $('.children_form').append('<li>'+[input]+'</li>');
})

i am trying to get my out to display as:

<li><input /></li>

But it doesn’t seem to work properly i am getting this code in my HTML

<li>[object Object]</li>

I believe this line is giving me the issue:

$('.children_form').append('<li>'+[input]+'</li>');

Answer 1

With [input] you are creating an array. But '<li>'+input+'</li>' won’t work either, because input is an object, not HTML.

You’d have to do like so:

$('.children_form').append($('<li />').append(input));

---

count is not a valid HTML attribute. You should use .data() instead. You can set the initial value with an attribute in HTML5 data attributes format: data-count="0".