Jquery 追加的文本字段不转到新行

单击表单上的“添加”按钮时，添加的第一个文本字段将显示在第一个文本字段旁边，而不是显示在下一行中

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（e）{
e、 预防默认值（）
$（“#短语”）。附加（“”）；
});
});

添加
使用Prepend并确保ID是唯一的


$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（e）{
e、 预防默认值（）
$（“#短语”）。前缀（“”）；
});
});

添加
我想，您的意思是希望新的输入字段框出现在下一行中。然后您可以尝试包含换行符，如下所示

$("#phrase").append('<br><div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');

$（“#短语”）.append（“
”）；
伙计们，我现在工作。我所要做的就是把div这个短语用另一个div括起来
HTML:



JQuery：

$(document).ready(function () {
    var counter = 1

    $("#add").click(function (e) { 

        e.preventDefault()
        $("#phrases").append('<div class="row" id="phrase' + counter + '"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
        counter++
        console.log(counter)
    });
});

$（文档）.ready（函数（）{
变量计数器=1
$（“#添加”）。单击（函数（e）{
e、 预防默认值（）
$（“#短语”）。附加（“”）；
柜台++
控制台日志（计数器）
});
});
您不应该复制ID。这取决于您使用的CSS。我看到你使用了“行”类，这是引导程序吗？你能在那里添加影响这个表单的CSS吗？您是否考虑过使用
？考虑到您的html外观，为什么还要在
#短语
中添加新标记？为什么要添加重复的ID？@AlexJolig是的，我稍后会添加一个计数器。我只是在测试添加新文本字段。@Norcino我使用的是Materialize CSSIs，Append？不可能。Append（）将数据放在元素的最后一个索引中，而.prepend（）将前置元素放在第一个索引中
$(document).ready(function () {
    var counter = 1

    $("#add").click(function (e) { 

        e.preventDefault()
        $("#phrases").append('<div class="row" id="phrase' + counter + '"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
        counter++
        console.log(counter)
    });
});