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

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

1 个答案: