CODEWITHSUNDEEP
jquery
Xavier
Xavier

Reputation: 8362

jQuery append string

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>');

Upvotes: 0

Views: 4337

Answers (2)

Kim Tranjan
Kim Tranjan

Reputation: 4541

$('.add_child').click(function(){
    var attrName = $(this).attr('name'),
        count = $(this).attr('count');

    $(this).attr('count', (parseInt(count)+1));

    var input = $('<input />', {
        type: 'text',
        name: attrName + '[' + count + ']',
    });
    $('.children_form').append($('<li>').html(input));
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816312

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".

Upvotes: 2

Related Questions