使用jQuery插入新创建的表元素

我目前有将行插入表的工作代码。看起来是这样的：

<script type= "text/javascript">
$(document).ready(function() {
    var new_row = '<td><input type="text" value="Type question here" /></td><td><input type="button"class="add_next" value=" + " /><input type="button" class="move_up" value=" ^ " /><input type="button" class="move_down" value=" v " /><input type="button" class="remove" value=" x " /></td>';

    var q_num = 2; // question number

    $('.add_next').click(function() {

        console.log(this);

        console.log(($('<tr>')).insertAfter($(this).closest('tr'))
                    .attr('id', 'Q'+q_num)
                    .attr('name', 'Q'+q_num)
                    .append(new_row)

            );
        q_num++;

    });
});
</script>

$（文档）.ready（函数（）{
var new_row=''；
var q_num=2；//问题编号
$（'.add_next'）。单击（函数（）{
console.log（this）；
console.log（（$（''）.insertAfter（$（this.closest（'tr'））
.attr（'id'，'Q'+Q_num）
.attr（'name'，'Q'+Q_num）
.append（新的_行）
);
q_num++；
});
});

我的问题是变量new_row很难看。我想使用$.append（$（''），.attr（）和其他jQuery函数动态创建这一行，但我还没有找到一种方法。我能想到的最好的办法是：

($('<tr>')).insertAfter($(this).closest('tr'))
                    .append($('<td>'))
                        .append('<input type="text" value="Type question here" />')
                    .append($('<td>'))
                        .append('<input type="button"class="add_next" value=" + " />')
                        .append('<input type="button" class="move_up" value=" ^ " />')
                        .append('<input type="button" class="move_down" value=" v " />')
                        .append('<input type="button" class="remove" value=" x " />');

（$（''）.insertAfter（$（this）.closest（'tr'））
.附加（$（''）
.append（“”）
.附加（$（''）
.append（“”）
.append（“”）
.append（“”）
.附加（“”）；

如何使用jQuery而不是一块有效的HTML来创建相同的条目

提前谢谢

而不是

.append('<input type="button"class="add_next" value=" + " />')

.append（“”）

你可以

.append($('<input />').attr({
    'class': 'add_next',
    'type': 'button',
    'value': ''
}));

.append（$（''）.attr({
'class'：'add_next'，
“类型”：“按钮”，
“值”：”
}));

您可以这样做：

var new_row = $('<tr/>',{'id':'Q'+q_num,'name':'Q'+q_num}).append(
    $('<td/>').append(
        $('<input/>',{'type':'text','value':'Type question here'})
    ),
    $('<td/>').append(
        $('<input/>',{'type':'button','value':' + ','class':'add_next'}),
        $('<input/>',{'type':'button','value':' ^ ','class':'move_up'}),
        $('<input/>',{'type':'button','value':' v ','class':'move_down'}),
        $('<input/>',{'type':'button','value':' x ','class':'remove'})
    ),
);

---

问题是在其他行的内部插入行。@JordWms是的，您必须稍微修改一下插入代码。我更新了我的答案！谢谢你的回复。我一定会记住的。是否有理由使用（$（''）.append（）而不是$（''）.append（），或者这只是一种样式选择？这是jQuery文档的惯例。

$(this).closest('tr').after(new_row);