在JavaScript函数中使用html

Question

我在下面的代码中遇到了一个小问题。 我写下面的代码。 无法找出这段代码有什么问题：

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

您的counter变量没有任何相关性，因为它是在本地声明的。 如果要在每次调用此函数时递增计数器，请全局声明它。 代码中也有一些语法错误，您的代码应类似于

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必须是全局的并且在$.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

与其使用onclick，不如使用干净的方法来做到这一点：

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

将HTML附加到DOM而不用担心字符串很长的一种方法是：

$('.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]">' )
    )
);

可能还有几行，但是我发现它更简洁，更易于阅读（当您的思维处于JS / jQuery模式时）并且更易于编写代码.....正如您所看到的是否有一个对象，这很容易迭代对象并生成所需的HTML