使用JavaScript更改标签文本

时间:2010-12-20 10:23:52

标签: javascript html label innerhtml

为什么以下不适合我?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>

8 个答案:

答案 0 :(得分:113)

因为您的脚本在页面上存在标签之前运行(在DOM中)。将脚本放在标签之后,或者等到文档完全加载(使用OnLoad函数,例如jQuery ready()http://www.webreference.com/programming/javascript/onloads/

这不起作用:

<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

这将有效:

<label id="lbltipAddedComment">test</label>
<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

This example (jsfiddle link)维护顺序(首先是脚本,然后是标签)并使用onLoad:

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

    });  
</script>

答案 1 :(得分:18)

您是否尝试过.innerText.value而不是.innerHTML

答案 2 :(得分:15)

因为执行脚本时未加载标签元素。交换标签和脚本元素,它将起作用:

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>

答案 3 :(得分:9)

改为使用.textContent

我也在努力改变标签的价值,直到我尝试过这个。

如果这还没有解决,请尝试检查对象,看看您可以通过console.dir将其记录到控制台来设置哪些属性,如此问题所示:How can I log an HTML element as a JavaScript object?

答案 4 :(得分:7)

使用.innerText应该有效。

document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';

答案 5 :(得分:4)

这是使用jQuery更改标签文本的另一种方法:

<script>
  $("#lbltipAddedComment").text("your tip has been submitted!");
</script>

检查JsFiddle example

答案 6 :(得分:0)

因为脚本将首先执行..当脚本执行时,此时控件不会被加载。所以在加载控件之后你就编写了一个脚本。

它会起作用。

答案 7 :(得分:0)

试试这个:

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>