为什么 innerHTML 会截断我的字符串（以及如何修复它）？答案

【问题标题】：Why is innerHTML truncating my string (and how do I fix it)?为什么 innerHTML 会截断我的字符串（以及如何修复它）？
【发布时间】：2021-02-11 16:17:50
【问题描述】：

我想输出两个简单的字符串（都来自用户输入）。 console.log 表示它们被 JavaScript 正确接收到各自的变量中，但是当我通过 innerHTLM 输出它们时，第一个在“

JavaScript

var content1 = "Dog- Happy<Hungry", content2 = "Dog- Happy<2Hungry"
console.log(content1,content2)
document.getElementById("output").innerHTML = content1 + "<br>" + content2

输出

Dog- HappyDog- Happy<2Hungry

预期输出

Dog- Happy<Hungry
Dog- Happy<2Hungry

输入来自用户，我希望他们能够使用“

如果有帮助，这里是一个 JSFiddle：https://jsfiddle.net/m79dca3p/

Encode html entities in javascript 无济于事，因为响应者在最佳解决方案上存在分歧，因此它仍然是公开辩论而不是解决方案。

【问题讨论】：

这能回答你的问题吗？ Encode html entities in javascript
考虑使用&lt; 而不是<？
@evolutionxbox — 这是用户输入。
@Quentin 这样的话角色可以换掉？
我发现这个似乎很相似，还有：stackoverflow.com/questions/6234773/…。这是推荐的解决方案，做一堆.replace() 行吗？

标签： javascript innerhtml

【解决方案1】：

< 是您在 HTML 中开始标记的方式，并且由于您使用 innerHTML，因此输入被视为 HTML。

如果您希望将输入视为纯文本，请使用一种处理文本而不是处理 HTML 的机制。

const content1 = "Dog- Happy<Hungry";
const content2 = "Dog- Happy<2Hungry";
const output = document.getElementById("output");
output.append(document.createTextNode(content1));
output.append(document.createElement('br'));
output.append(document.createTextNode(content2));

&lt;div id=output&gt;&lt;/div&gt;

【讨论】：

我不熟悉.append()。它是否可以正确处理这些符号而无需将它们换掉？
没有。 createTextNode 确实如此。您可以在答案中的现场演示中看到结果。

【解决方案2】：

只需使用 innerText 代替 innerHTML 并添加您的 <br>separateley

【讨论】：

我不认为innerText 尊重中断标签。
如何在同一文本节点的两段文本之间添加<br>？
@inetphantom 你能评论一下innerText的优点吗？