Как использовать HTML-теги в <pre> при обновлении из скрипта

Question

У меня есть текст <pre id="printed-table">bunch of monkeys</pre>, Я хочу обработать текст с помощью JavaScript window.onload выделить слово monkeys,

Итак, это должно выглядеть

 куча обезьян 

когда страница загружена.

У меня есть сценарий

<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>