javascript - 从脚本更新时如何在 <pre> 中使用 html 标签

Question

我有一条短信<pre id="printed-table">bunch of monkeys</pre> 。我想用 javascript window.onload 处理文本突出显示单词 monkeys .

所以，它应该看起来像

bunch of monkeys

when page is loaded.

I have a script

<script type="text/javascript">
  window.onload = function() {
    var p = document.getElementById("printed-table");
    var t = p.firstChild.nodeValue;
    p.firstChild.nodeValue = t.replace(/monkeys/gmi, function(a) {
return "<strong>" + a + "</strong>"; } ) } 
</script>

但是当页面加载时，它看起来像

bunch of <strong>monkeys</strong>

我错过了什么？

谢谢。

Answer 1

尝试设置p.innerHTML而不是p.firstChild.nodeValue 。如果这样做，您将设置元素的实际 HTML 内容，而不是 <pre> 内文本节点的(文本)值。元素。

  window.onload = function() {
    var p = document.getElementById("printed-table");
    var t = p.firstChild.nodeValue;
    p.innerHTML = t.replace(/monkeys/gmi, function(a) {
      return "<strong>" + a + "</strong>"; } ) } 

 <pre id="printed-table">bunch of monkeys</pre>