2015-06-08 2 views
0

, например, если я хочу, чтобы отобразить текст с яваскрипта бок о бок, как этоКак использовать innerHTML для отображения текста

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

как это сделать.

+1

Вы должны добавить данные с существующей. –

ответ

0

вы установили те же идентификаторы. Создайте 3 идентификатора, а не только один.

сделать это или что:

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

+= может быть проблематичным при использовании нестандартного имущества 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() т.д.

0

Просто Seach для элемента один раз, а также передать значения в качестве массива (более динамичные и менее ограничены).

<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> 
1
<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> 
Смежные вопросы