Перенос строки через JavaScript

136
29 января 2021, 03:50

Пишу небольшой чат. Каждое новое сообщение нужно выводить с новой строки.

Написал вот так:

document.getElementById("chat").textContent = document.getElementById("chat").textContent + "</br>" + newMsg;

То есть, старался опираться на который в html переносит строку, но здесь, в моем случае воспринимается как обыкновенный текст. Как переносить каждое новое сообщение на новую строку?

Answer 1

По поводу Вашего вопроса - вы устанавливаете textContent тег <br> в нем не сработает.

Я бы Вам советовал добавлять каждое сообщение отдельным элементом, так проще сделать оформление или анимацию для сообщений, если это конечно требуется

let chat = document.getElementById("chat"); 
 
setInterval(e => { 
  addMessage(Math.random().toString(36).substring(2)); 
  chat.childNodes.length >= 5 && removeFirstMessage(); 
}, 1000) 
 
function addMessage(newMsg) { 
  let block = document.createElement('div'); 
  block.classList.add('block'); 
  block.style.backgroundColor = `hsl(${Math.random()*360},55%,85%)`; 
  block.textContent = newMsg; 
  setTimeout(e => block.style.opacity = 1); 
  chat.append(block); 
} 
 
function removeFirstMessage() { 
  chat.firstChild.style.opacity = 0; 
  let h = chat.firstChild.getBoundingClientRect().height; 
  chat.firstChild.style.marginTop = `-${h + 5}px`; // 5 - margin 
  setTimeout(e => chat.firstChild.remove(), 500); 
}
.block { 
  width: 300px; 
  margin-bottom: 5px; 
  padding: 5px; 
  border-radius: 5px; 
  opacity: 0; 
  transition: 300ms; 
}
<div id="chat"></div>

READ ALSO
Поворот и движение объекта

Поворот и движение объекта

Я новичок в Unity и недавно у меня появилась проблема: как запрограммировать 2D персонажа с видом сверху на движение вперёд и назад, при нажатии...

187
Как настроить кнопку в Unity?

Как настроить кнопку в Unity?

Есть вот такой код:

137
Я ответила B и F Но не уверена в верности ответа. Подскажите правильный ответ

Я ответила B и F Но не уверена в верности ответа. Подскажите правильный ответ

You are testing an applicationThe application includes methods named Calculatelnterest and LogLine

128
Как вызвать функцию при нажатии на раскрытие узла TreeView?

Как вызвать функцию при нажатии на раскрытие узла TreeView?

Как вызвать функцию при нажатии на раскрытие узла TreeView ?

109