Javascript打印html标签作为innerHTML输出到屏幕的一部分

Question

我有一个javascript段，将输出打印到div。

output.textContent = "";
for(i=0; i<14; i++){
    output.append(document.createElement("p").innerHTML = net_words(sonnet[i]));
    output.append(document.createElement("br"));
  }

生成输出的函数net_words如下：

function net_words(line) {
  var net_line = Math.floor(Math.random()*4)
  var ret = ""
  if (net_line != 1) {
    ret += "<span class=\"netno\">"
    ret += line
  }
  else {
    var net_list = line.split(" ")
    var rand_word = Math.floor(Math.random() * net_list.length)
    ret += "<span class=\"netno\">"
    for (var i=0; i<net_list.length; i++) {
      if (i == rand_word) {
        ret += "<span class=\"netyes\">"
        ret += net_list[i]
        ret += " "
        ret += "</span>"
      }
      else {
        ret += net_list[i]
        ret += " "
      }
    }
  }
  ret += "</span>"
  return ret
}

问题是，它打印如下行：

<span class="netno">From fairest creatures we desire increase</span>

也就是说，它打印HTML标签可见，而不是应用于代码。当我将它粘贴到文本编辑器中以进行堆栈溢出时，它会正常打印（无标记），除非我将其作为代码片段。这个错误的原因是什么？

Answer 1

问题出在这里：

output.append(document.createElement("p").innerHTML = net_words(sonnet[i]));

你认为你附加了<p>，但事实上你附加了赋值的结果。要修复它：

var p = document.createElement("p");
p.innerHTML = net_words(sonnet[i]);
output.append(p);

要么

output.innerHTML += '<p>' + net_words(sonnet[i]) + '</p>';