Use html in JavaScript function

Question

I face a little problem in below code. I write below code. Unable to find out what's wrong in this code :

HTML:

<div class="all">
    <div class="info">
        <label>Degree <input type="text" class="row[0][degree]"></label>
        <label>School <input type="text" class="row[0][school]"></label>
        <label>Grade <input type="text" class="row[0][grade]"></label>
    </div>
</div>
<button class="add_button" onclick="add_new()">Add Another</button>

JavaScipt:

var counter = 1;

function add_new() {

    $('.all').append('
                <div class="info">/
                        <label>Degree <input type="text" class="row[' + counter + '][degree]"></label>/
                        <label>School <input type="text" class="row[' + counter + '][school]"></label>/
                        <label>Grade <input type="text" class="row[' + counter + '][grade]"></label>/
                </div>'
        counter++;
    );
}

Answer 1

Your counter variable doesnt have any relevence, since it is declared locally. If you want to increment the counter each time when calling this function, declare it globally. Also there are some syntax errors in the code, Your code should look like

var counter = 0;
  function add_new() {

    $('.all').append('<div class="info">\
                    <label>Degree <input type="text" class="row[' + counter + '][degree]"></label>\
                    <label>School <input type="text" class="row[' + counter + '][school]"></label>\
                    <label>Grade <input type="text" class="row[' + counter + '][grade]"></label>\
            </div>'

    );

counter++;
}

Answer 2

关闭.append()方法后，尝试增加计数器。

Answer 3

counter has to be global and incremented outside of $.append

var counter = 0;
function add_new(){
    $('.all').append('<div class="info"><label>Degree <input type="text" class="row['+counter+'][degree]"></label><label>School <input type="text" class="row['+counter+'][school]"></label><label>Grade <input type="text" class="row['+counter+'][grade]"></label></div>');                
counter++; 
}

JSFiddle

Answer 4

Instead of using onclick,do it like this with clean way:

HTML:

<button class="add_button">Add Another</button>

JQUERY:

$(document).ready(function(){

 var counter = 0;

$(".add_button").click(function(){

            $('.all').append('
            <div class="info">/
                    <label>Degree <input type="text" class="row['+counter+'][degree]"></label>/
                    <label>School <input type="text" class="row['+counter+'][school]"></label>/
                    <label>Grade <input type="text" class="row['+counter+'][grade]"></label>/
            </div>'

            );   
counter++;

   });

})

Answer 5

One way you can append HTML into the DOM without worrying about really long strings is:

$('.all').append(
    $('<div class="info"/>').html(
        $('<label/>').html( 'Degree ' ).append('<input type="text" class="row[' + counter + '][degree]">')
    )
    .append(
        $('<label/>').html( 'School ' ).append( '<input type="text" class="row[' + counter + '][school]">' )
    )
    .append(
        $('<label/>').html( 'Grade ' ).append( '<input type="text" class="row[' + counter + '][grade]">' )
    )
);

It may be a few more lines, but I find it cleaner, easier to read (when your mind is in JS/jQuery mode) and easier to code .... ... as you can see if there's an object it's quite easy to iterate the object and generate the required HTML