Выводить новые элементы внизу списка

Question

Мне нужно, чтобы по клику новая строчка выводилась снизу текста. Она выводится сверху. При этом если добавлять текст без тегов, то все как нужно:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script language="JavaScript" type="text/javascript">
        function addHtml() {
            let date = new Date();
            let innerHTML = document.getElementById('main-panel-text-finally').innerHTML;
            // let newEl = 'Adding more content here' + date.getSeconds() + date.getMilliseconds() + '<br>';
            let newEl = '<span style="color:green">Adding more content here :)' +  date.getSeconds() + '.' + date.getMilliseconds() + '</span>';
            document.getElementById('main-panel-text-finally').innerHTML = innerHTML + newEl;
        }
    </script>

    <style>
        #main-panel-text-finally {
            display: flex;
            flex-direction: column-reverse;
        }
    </style>
</head>


<div id="main-panel-text-finally" style="overflow-y: auto; height:350px; width:650px;">

</div>


<button class="btn btn-outline-secondary" type="button" id="send-main" onclick="addHtml()">send</button>

</html>

https://jsfiddle.net/ddyuriev/wLnekqm6/1/

Answer 1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <script language="JavaScript" type="text/javascript">
    function addHtml() {
      let date = new Date();
      let innerHTML = document.getElementById('main-panel-text-finally').innerHTML;
      // let newEl = 'Adding more content here' + date.getSeconds() + date.getMilliseconds() + '<br>';
      let newEl = '<span style="color:green">Adding more content here :)' + date.getSeconds() + '.' + date.getMilliseconds() + '</span>';
      document.getElementById('main-panel-text-finally').innerHTML = newEl + innerHTML;
    }
  </script>

  <style>
    #main-panel-text-finally {
      display: flex;
      flex-direction: column-reverse;
    }
  </style>
</head>


<div id="main-panel-text-finally" style="overflow-y: auto; height:350px; width:650px;">

</div>


<button class="btn btn-outline-secondary" type="button" id="send-main" onclick="addHtml()">send</button>

</html>

Answer 2

Эпично)

Но крайне неэффективно. Конструкция %element%.innerHTML = %added_element% + %previous_content% - это примерно то же самое, что покупая товары в супермаркете бегать к кассе с каждым по отдельности, причем таскать тележку с уже купленными товарами с собой. И чем тяжелее innerHTML, тем сильнее все это тупит.

Правильно так:

создаем элемент
наполняем его содержимым

добавляем новый элемент в нужное место, например, в элемент "yourElement":

var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Привет!</h1>";
yourElement.appendChild(newDiv);

БЛОГ НА HUSL

Выводить новые элементы внизу списка

Ответы (2 шт):