如何使用innerHTML显示文本答案

【问题标题】：How to use innerHTML to display text如何使用innerHTML显示文本
【发布时间】：2015-06-08 12:20:38
【问题描述】：

例如，如果我想像这样并排显示来自 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

我该怎么做。

【问题讨论】：

您必须将数据附加到现有数据中。

标签： javascript innerhtml

【解决方案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() 等。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您将文本设置为相同的 ID。创建 3 个 id，而不仅仅是一个。

做这个或那个：

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


function doSomeThing()
{
    //do something
    document.getElementById("displayText1").innerHTML = text1;
    //do something
    document.getElementById("displayText2").innerHTML = text2;
    //do something
    document.getElementById("displayText3").innerHTML = text3;
}

//HTML ?
<span id="displayText1"></span>
<span id="displayText2"></span>
<span id="displayText3"></span>

【讨论】：

【解决方案4】：

只需搜索元素一次，并将值作为数组传递（更动态且限制更少）。

<html>
    <head>
        <script>
            function doSomeThing(v){
                var tE = document.getElementById('displayText');
                if (tE) tE.innerHTML = (v || []).join(' ');
            }
        </script>
    </head>

    <body onload = "doSomeThing(['text1', 'text2', 'text3'])">
        <span id = 'displayText'></span>
    </body>
</html>

【讨论】：