Почему через append я не могу передать строку с абзацами?

Question

[Богдан Кучерук]

<div id="div"></div>
<textarea name="name" id="name" value=""></textarea>
<button onclick="TFun()">Отправить</button>
<div id="res"></div>
<script>
  function TFun(){
    res.innerText = document.getElementById('name').value
    var aj = document.getElementById('name').value
    var chat = document.getElementById("name");
    $("#div").append('<div>'+aj+'</div>');
    chat.value = '';
  }
</script>

Comments

[Сергей Соколов]

смотрите в консоль браузера – там ошибки, вероятно.

Например, забыли

const res = document.getElementById('res');
res.innerText = .....

[Богдан Кучерук]

Сергей Соколов, оно работает в одну строку

res.innerText = document.getElementById('name').value

[Богдан Кучерук]

[Богдан Кучерук]

В блоке «res» всё хорошо:<div id="res">1<br>1<br>1</div>
А в блоке «div» уже такое приходит: <div>111</div>

Answer 1

[Сергей Соколов]

Установка свойства innerText заменяет переносы строк на тег <br />

jQuery.append() просто присоединит HTML, в котором переносы строк значат то же, что пробелы. Если хочется переносов строк – надо вручную сделать замену.

Comments

[Богдан Кучерук]

Не заменяет. В блоке «res» выводит с переводом строки. Через append передается переменная aj которая не использует даже InnerText.

[Сергей Соколов]

Богдан Кучерук, об этом и ответ. Там где назначете через innerHTML переносы строк становятся тегами br.
Автомагически.

Такого фокуса более нигде нет, в т.ч. нет его с append. Там надо самому добавить замену переноса строк на тег.

[Богдан Кучерук]

Сергей Соколов, вообще не понял. И как это сделать?

[Богдан Кучерук]

Сергей Соколов, теперь понял. Там функция InnerText подмену делает. А как тогда отличить пробелы от переноса строки?

[Богдан Кучерук]

Там еще такой прикол что если копировать содержимое блока то копируется с переносом строки

[Сергей Соколов]

В тексте различаются пробел и новая-строка (ещё и зависит от платформы – где-то перенос это не один, а два символа: \r и \n, где-то только один \n)

В HTML "whitespace" (пробелы и переносы строк) сжимаются до одного пробела. Можно записать с переносами строк, но они становятся одним пробелом в итоге:

<p>
  строка         1
  строка 2
</p>

– выведет "строка 1 строка 2". Хотя в исходном HTML можно посмотреть и увидеть все лишние пробелы и переносы.

В HTML два варианта показать исходные переносы строк:

• заменить их явно на <br />
  
• стилями заставить «уважать» все эти переносы и пробелы в коде — как вам ответили в другом вопросе
  

[Богдан Кучерук]

Сергей Соколов, подскажите как все исправить)

[Сергей Соколов]

Богдан Кучерук, чем ответ в другом вопросе не подходит? Стилями просто решить проблему.

[Богдан Кучерук]

Сергей Соколов, а что делать если я эту строку хочу записать в БД?

[Сергей Соколов]

Богдан Кучерук, записывайте как есть – она же содержит переносы строк.

[Богдан Кучерук]

Сергей Соколов,

spoiler

Спасибо