javascript - 如何使用innerHTML显示文本

Question

例如，如果我想像这样并排显示来自 javascript 的文本

文本1文本2文本3

所以我输入了这段代码

<p id=displayText> <p>
<script type="text/javascript">
function doSomeThing()
{
  //do something
  document.getElementById("displayText").innerHTML=text1;
  //do something
  document.getElementById("displayText").innerHTML=text2;
  //do something
  document.getElementById("displayText").innerHTML=text3;
}
</script>

我只有

文本3

我该怎么做。

Answer 1

+=与非标准属性 innerHTML 一起使用时可能会出现问题.

您可以避免使用+=上innerHTML通过使用额外的变量:

function doSomeThing()
{
    var progress = "";
    //do something
    progress += text1;
    document.getElementById("displayText").innerHTML = progress;
    //do something
    progress += text2;
    document.getElementById("displayText").innerHTML = progress;
    //do something
    progress += text3;
    document.getElementById("displayText").innerHTML = progress;
}

+=如果你这样做就会有问题:

e.innerHTML += '<a href="#">foo';
e.innerHTML += 'bar';
e.innerHTML += '</a>';

实际输出 HTML 将为 <a href="#">foo</a>bar 。那是怎么发生的？好吧，当你将innerHTML设置为<a href="#">foo时浏览器会尝试为您“修复”它，因此它会添加 </a>使其有效。

<小时/>

还有一些方法可以避免使用 innerHTML完全通过使用 DOM API 正确 document.createElement()/createTextNode()等等