Как сделать новые текстовые строки в div на вершине?

Question

Я не понимаю, как создать новую строку поверх элемента div, то есть всякий раз, когда нажимается кнопка, новая текстовая строка сверху, а предыдущая - ниже. Прямо сейчас, новая текстовая строка находится под первой, когда я нажимаю другую кнопку, а не выше. Поэтому мой вопрос: как вы делаете новые текстовые строки сверху, а не внизу?

JavaScript:

var LineText="" 

$(document).ready(function() { 
$("#btnSubmit").click(function(){ 
     $('.stashText').html(LineText+="<br><br>Line_No_1"); 
}); 
}); 



$(document).ready(function() { 
$("#btn2Submit").click(function(){ 
     $('.stashText').html(LineText+="<br><br>Line_No_2"); 
}); 
}); 

HTML:

<button type=button id="btnSubmit">S 
</button> 
<button type=button id="btn2Submit">S2 
</button> 

<br> 
<br> 
<div class="stashText"> 

</div> 

JSFiddle

Answer 1

prepend Используйте вместо этого.

var LineText="" 

$(document).ready(function() { $("#btnSubmit").click(function(){ 
     $('.stashText').prepend("<br><br>Line_No_1"); }); }); 



$(document).ready(function() { $("#btn2Submit").click(function(){ 
     $('.stashText').prepend("<br><br>Line_No_2"); }); }); 

JSFiddle: https://jsfiddle.net/r09dsp1d/15/

Answer 2

Просто используйте .prepend вместо .html Вот ваш обновленный jsfiddle https://jsfiddle.net/qcma197k/

$(document).ready(function() { 
    $("#btnSubmit").click(function() { 
     $('.stashText').prepend("<br><br>Line_No_1"); 
    }); 

    $("#btn2Submit").click(function() { 
     $('.stashText').prepend("<br><br>Line_No_2"); 
    }); 
}); 

Answer 3

Вы можете просто использовать jquerys функцию "перед именем", смотрите здесь:

$(document).ready(function() { 
$("#btnSubmit").click(function(){ 
     $('.stashText').prepend("<br><br>Line_No_1"); 
}); 
}); 



$(document).ready(function() { 
$("#btn2Submit").click(function(){ 
     $('.stashText').prepend("<br><br>Line_No_2"); 
}); 
}); 

https://jsfiddle.net/r09dsp1d/14/

Answer 4

Изменение LineText+="<br><br>Line_No_1" в "<br><br>Line_No_1" + LineText:

var LineText = ""; 
 

 
$(document).ready(function() { 
 
    $("#btnSubmit").click(function() { 
 
    LineText = "<br><br>Line_No_1" + LineText; 
 
    $('.stashText').html(LineText); 
 
    }); 
 
    $("#btn2Submit").click(function() { 
 
    LineText = "<br><br>Line_No_2" + LineText; 
 
    $('.stashText').html(LineText); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type=button id="btnSubmit">S</button> 
 
<button type=button id="btn2Submit">S2</button> 
 

 
<br> 
 
<br> 
 
<div class="stashText"></div>

Кроме того, нет необходимости вызывать $(document).ready() дважды.