在前端开发中，我们经常需要在 DOM 元素中插入文本内容。使用 textContent 属性是一种简单有效的方法，它可以将文本转换为字符串并插入到 DOM 中。但是，当我们需要在插入的文本中添加新行或回车时，会遇到一些问题。本文将介绍如何在 textContent 中插入新行和回车符。
新行和回车符的区别
在开始讨论如何插入新行和回车符之前，我们先来了解一下它们的区别。
- 新行符（"\n"）用于 Unix 和类 Unix 系统中的文本文件，表示换行。
- 回车符（"\r"）用于 Macintosh 系统中的文本文件，表示换行。
- 回车符和新行符组合起来（"\r\n"）用于 Windows 系统中的文本文件，表示换行。
在 HTML 中，回车符和新行符都被视为空格，并且会被浏览器忽略。因此，如果要在 HTML 中插入新行或回车符，需要使用特殊的标记。
使用
标记插入新行
在 HTML 中，可以使用 <br> 标记来插入新行。例如：
<p>Hello<br>World!</p>
这段代码会在 "Hello" 和 "World!" 之间插入一个新行。
在 JavaScript 中，我们可以使用 createElement 方法创建 <br> 元素，并将其添加到元素的子节点中。例如：
const element = document.getElementById("myElement");
const br = document.createElement("br");
element.appendChild(br);这段代码会在 myElement 元素的末尾插入一个新行。
使用 和 插入回车和新行
如果要在文本中插入回车符或新行符并使其生效，可以使用 HTML 实体来表示它们。
表示回车符。 表示新行符。
例如，在 HTML 中，可以将以下内容插入到元素中：
<p>Hello World!</p>
这段代码会在 "Hello" 和 "World!" 之间插入一个新行。
在 JavaScript 中，可以使用 String.fromCharCode 方法来生成特殊字符，并将其添加到元素的 textContent 属性中。例如：
const element = document.getElementById("myElement");
const text = "Hello" + String.fromCharCode(13) + String.fromCharCode(10) + "World!";
element.textContent = text;这段代码会在 myElement 元素中插入一个包含新行的文本。
结论
在插入新行和回车符时需要注意，不同的系统使用的符号是不同的。在 HTML 中，可以使用 <br> 标记插入新行，在 JavaScript 中，可以使用 和 实体来插入回车和新行。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26853