Question

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

text1 text2 text3

所以我输入了这段代码

<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时，浏览器会尝试修复＆＃39;它适合你，所以它添加了</a>以使其有效。

还有一些方法可以避免使用innerHTML正确的document.createElement()/createTextNode()来完全避免使用<script> function changeImg(imgId) { document.getElementById('img').src = 'thumbs/'+imgId+'.jpg'; document.getElementById(imgId).className = 'gallery-nav-link-current'; for(i=1; i <= 3; i++) if(imgId != i.toString()) document.getElementById(i.toString()).className = 'gallery-nav-link'; } </script>。

Answer 2

$ awk --non-decimal-data -F':' '{printf "%d:%s\n", "0x" $1, $2}' INPUT
3054239830: aaa1 bb1 ccc1 ddd1 eee1 fff
3054239830: aaa2 bb2 ccc2 ddd2 eee2 fff
3054239831: aaa3 bb3 ccc3 ddd3 eee3 fff
3054239832: aaa4 bb4 ccc4 ddd4 eee4 fff
3054239833: aaa5 bb5 ccc5 ddd5 eee5 fff

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

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

如何使用innerHTML来显示文本

4 个答案: