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

你可以使用jquerys＆＃34; prepend＆＃34;功能，看这里：

    (function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
      $.fn.hasScrollBar = function() {
        var e = this.get(0);
        return {
          vertical: e.scrollHeight > e.clientHeight,
          horizontal: e.scrollWidth > e.clientWidth
        };
      }
    })(jQuery);

    $.fn.StickyX = function() {
      var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first();
      if(parentWithScroll)  {
      var e = $(this);
      parentWithScroll.scroll(function() {
        e.css('margin-left', ($(this).width() / 2) - (e.width() / 2) + $(this).scrollLeft() + 'px');
      })
      return this.css('margin-left', (parentWithScroll.width() / 2) - ($(this).width() / 2) + parentWithScroll.scrollLeft() + 'px');
      } else {
        return this.css('margin-left', 'auto;');
      }
    };

    $('.pagination').StickyX();

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

Answer 2

改为使用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 3

只需使用DependencyProperty代替.prepend 这是你更新的jsfiddle https://jsfiddle.net/qcma197k/

.html

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()。

如何在div中创建新的文本行？

4 个答案: