附加文本不會出現在正確的格式

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>