附加文本不会出现在正确的格式

Question

我有以下jQuery和HTML代码

var i = 2; 
 
$('#addbtn').click(function() { 
 
    i = i + 1; 
 
    $('#options').append('<label for="' + i + '" class="black-text">' + i + '.</label><input id="' + i + '" type="text">'); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="options" class="row"> 
 
    <label for="1" class="black-text">1.</label> 
 
    <input id="1" type="text"> 
 
    <label for="2" class="black-text">2.</label> 
 
    <input id="2" type="text"> 
 
</div> 
 

 
<button id="addbtn" class="btn-floating btn-large waves-effect waves-light blue" style="font-size:20;" href="" onclick="return false;"><i class="material-icons">add</i></button>

我要追加更多的选择，因为我点击添加按钮。 但我无法弄清楚这段代码有什么问题。当我第一次点击添加按钮时，附加文本出现在页面的右上角（与下面的选项2不同），当我不断点击按钮时，附加文本最终向左移动。希望问题足够清楚。 谢谢。

Answer 1

您可以添加一个div标签

var i = 2; 
 
$('#addbtn').click(function() { 
 
    i = i + 1; 
 
    $('#options').append('<div><label for="' + i + '" class="black-text">' + i + '.</label><input id="' + i + '" type="text"></div>'); 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="options" class="row"> 
 
    <div><label for="1" class="black-text">1.</label> 
 
    <input id="1" type="text"></div> 
 
    <div><label for="2" class="black-text">2.</label> 
 
    <input id="2" type="text"></div> 
 
</div> 
 

 
<button id="addbtn" class="btn-floating btn-large waves-effect waves-light blue" style="font-size:20;" href="" onclick="return false;"><i class="material-icons">add</i></button>