javascript - 在事件触发后，如何添加新的换行符并保留以前的换行符？

我正在做一个聊天应用程序，需要附加消息。问题是新邮件都是内联的，我需要一种在邮件发送后创建新行的方法，而不是删除前一条消息。

我用过'\ n'，但它只提供空格。我尝试使用innerHTML，但它替换了所有内容，因此以前的消息丢失了。

我想使用香草js解决此问题。

本质上，我想将这行Jquery转换为js：

socket.on('chat message', function(msg){
  $('#messages').append($('<li>').text(msg));
});

最佳答案

将新行包装在块级元素中（在此示例中，我使用了section）。为了避免每次添加行时都清除整个日志，可以使用insertAdjacentHTML，它允许您直接指出HTML的结尾位置。

const area = document.querySelector('textarea');
const save = document.querySelector('button');
const log = document.querySelector('#log');

save.addEventListener('click', handleClick, false);

function handleClick() {
  const { value } = area;
  const html = `<section>${value}</section>`;
  log.insertAdjacentHTML('beforeend', html);
  area.value = '';
}

<textarea></textarea>
<button>Save</button>
<h4>Log</h4>
<main id="log" />

关于javascript - 在事件触发后，如何添加新的换行符并保留以前的换行符？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57522222/