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 = 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/

2 ответа 2

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>

2
  • Эпично) Спасибо!
    – user252763
    Commented 1 мар. 2020 в 16:45
  • @Dimas На здоровье. Успехов!
    – user176262
    Commented 1 мар. 2020 в 16:51
0

Эпично)

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

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

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

    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<h1>Привет!</h1>";
    yourElement.appendChild(newDiv);
    
2
  • Спасибо, попробую
    – user252763
    Commented 2 мар. 2020 в 15:30
  • не получилось так. Мне нужно, чтобы текст появлялся в нижней части блока, и сдвигал текущий текст вверх
    – user252763
    Commented 2 мар. 2020 в 15:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.