使用 JS insidetext 插入元素会导致它们被原始打印（未渲染）

Question

我有一个 JavaScript 函数，它使用 document.innertext 来更改我的<p>元素之一的文本值。我想确保某些文本具有不同的颜色，根据我收集的信息，最好的解决方案是在元素<span>内使用标签<p>。如果我将其硬编码到 html 中，它就可以正常工作。

但是，如果我使用 insidetext 函数覆盖<p>标签的内容，<span>则会将其打印出来，就好像它只是一个字符串一样。如果我使用浏览器检查器，则<span>将以黑色突出显示，这意味着它被视为字符串。Chrome 和 Firefox 都会执行此操作，并且我的页面是 .php，但如果我将其重命名为 .html，则具有相同的效果。出于某种原因，网上数以百万计的代码片段执行完全相同的操作，但我的代码片段却不能。

该函数基本上是这样的，document.getElementById("message").innerText = `<span style="color: red;">sample</span>: text`;它不是将“sample”渲染为红色，将“text”渲染为黑色，而是将“< span style =“color：red;”>示例文本”全部渲染为黑色。

我希望我说清楚了。预先感谢您的任何帮助。

Answer 1

您需要使用文档的innerHTML属性。例如：document.getElementById("message").innerHTML&nbsp;=&nbsp;"<span&nbsp;style="color:&nbsp;red;">sample</span>:&nbsp;text";我希望这会对您有所帮助！快乐编码！