如何使用 JavaScript 脚本在 HTML 中换行

Question

所以我遇到了一个问题，即使我输入了正确的语法，我的代码也不想换行

oldchat = ''

var paragraph = document.getElementById("chat");

function SendMsg() {
  let x = document.getElementById("Username")
  let username = x.value
  let message = prompt();
  chat = (oldchat + "\n" + username + ": " + message)
  oldchat = chat;
  let Modifiedmessage = document.createTextNode("\n" + username + ":" + message)
  paragraph.appendChild(Modifiedmessage);
}

<input id="Username">
<button onclick="SetUser()">Set Username</button>
<button onclick="SendMsg()">send message</button>
<br>
<div id="chat">

</div>

我原以为我的代码会像这样

VibingCat: Hi
User123: Hello there!

Answer 1

不是 HTML 中的换行符，而是
是.

chat = (oldchat + "<br>" + username + ": " + message)
paragraph.innerHTML = chat;

此外，您不需要在 SendMsg() 函数中为修改后的消息创建新的文本节点，因为您已经将 HTML 添加到段落元素中。

Answer 2

• 你只需要使用一些CSS像：

  line-break: pre-wrap;

  为了解释

  \n

• 为了防止 XSS，总是使用

  textContent

  而不是

  innerHTML

  ，或者创建文本节点而不是 HTML。

// DOM utility functions
const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// CHAT:
const elUsername = el("#username");
const elMessage = el("#message");
const elSend = el("#send");
const elChat = el("#chat");

const printMessage = (msg) => {
  const elMsg = elNew("div", {
    className: "msg",
  });
  const elMsgUsername = elNew("div", {
    className: "msg-username",
    textContent: msg.username,
  });
  const elMsgText = elNew("div", {
    className: "msg-message",
    textContent: msg.message
  });
  elMsg.append(elMsgUsername, elMsgText);
  elChat.append(elMsg);
};

const sendMessage = () => {
  const username = elUsername.value.trim();
  const message = document.createTextNode(elMessage.value.trim()).textContent;
  if (!username || !message) return;
  printMessage({username, message});
  elMessage.value = "";
};

elSend.addEventListener("click", sendMessage);

const messages = [
  {username: "John", message: "Hi you!\nwhat's up?"},
  {username: "Anne", message: "Hey John!🌞\nHow's going with JS?"},
];

messages.forEach(printMessage);

.msg {
  padding: 0.5rem 1rem;
  border: 1px solid #aaa;
}
.msg-username {
  color: #888;
  font-weight: bold;
}
.msg-message {
  white-space: pre-wrap;
}

<div id="chat"></div>
<input id="username" type="text" placeholder="Username"><br>
<textarea id="message"></textarea><br>
<button id="send" type="button">Send</button>

从上面可以看出：

1. 在需要的地方使用

   const

2. 避免使用

   prompt()

   使用

   <textarea>

   代替
3. 避免使用 HTML 内联

   on*

   处理程序，而是使用

   addEventListener()

   。 JS 应该在一个地方，那就是相应的文件或标签
4. 不要用句子大小写来命名你的函数。这不是一个类
5. 不要使用字符串来存储您的聊天消息使用更好的数据格式，如数组和对象来保存用户名、时间和消息

6. trim()

   来自空格的消息

Answer 3

你需要使用 html 标签而不是 " “当您在 div 元素内呈现聊天时，因此您需要发送要在该 div 元素内呈现的 DOM 元素。

oldchat + "\n" + username + ": " + message

应该是

oldchat + "<br>" + username + ": " + message

Answer 4

嗨，这是新版本的代码

let oldchat = '';
const paragraph = document.getElementById("chat");
const usernameInput = document.getElementById("Username");

function SetUser() {
  const username = usernameInput.value;
  oldchat = '';
  paragraph.textContent = '';
  alert(`Username set to: ${username}`);
}

function SendMsg() {
  const username = usernameInput.value;
  const message = prompt();
  const chat = oldchat + "\n" + username + ": " + message;
  oldchat = chat;
  const modifiedMessage = document.createTextNode("\n" + username + ": " + message);
  paragraph.appendChild(modifiedMessage);
}

<input id="Username">
<button onclick="SetUser()">Set Username</button>
<button onclick="SendMsg()">send message</button>
<br>
<div id="chat">

</div>