javascript - 在带有 createTextNode 的段落上使用 <span>

标签 javascript html

我想在段落上为一个单词着色,但我用 TextNode 创建了这个段落,然后像一些文本一样显示。

例子 :

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createTextNode("Hello World <span style=\"color: #BA0000\">error</span> ");
  document.body.appendChild(t);
}
</script>

</body>
</html>

最佳答案

您想创建一个 元素 不是文字。 文本节点 将显示您提供的任何文本,而不是构建您传递给它的 html。因此,您需要在变量中单独创建元素,或者使用您拥有的任何内容设置父元素的 innerHTML,例如 <span>。 .

尝试创建一个像段落标签这样的元素,然后将其设置为如下所示的 innerhtml:

 var t = document.createElement('p');
 t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";

这将为您提供您想要的带有 html 的元素,而不仅仅是文本。请参见下面的示例。

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createElement('p');
  t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";
  document.body.appendChild(t);
}
</script>

</body>
</html>

关于javascript - 在带有 createTextNode 的段落上使用 <span>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60116055/

相关文章:

javascript - 通过 Props 将值从 React Stateless Child 传递给 Parent

javascript - 移动选择表格行

javascript - querySelectorAll 在 Rails 5 中不起作用

javascript - iOS 7 :UIWebView (Safari) crashes due to memory overflow

javascript - 在表单元素中单击

python - 如何使用python从 "../../"和另一个路径获取正确的文件路径

Javascript 循环问题

css - 如何根据父div中子div的数量设置div的高度

html - 当一个列变大时不要缩放其他列

html - 如何在使用 CSS 加载时将微调器设置到屏幕中间?