使用 JavaScript 更改标签文本答案

【问题标题】：Change label text using JavaScript使用 JavaScript 更改标签文本
【发布时间】：2011-05-28 04:27:29
【问题描述】：

为什么以下内容对我不起作用？

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

【问题讨论】：

哎呀！抱歉，应该是“不”；0
因为当您编写脚本尝试更改标签 innerHtml 时，页面上实际上不存在 lbltipAddedComment。在标签后插入脚本或使用 jquery $(document).ready()
抱歉没有看到编辑按钮！
我尝试了这里建议的所有方法，但没有任何效果。

标签： javascript html label innerhtml

【解决方案1】：

因为您的脚本在标签存在于页面（在 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>

【讨论】：

我认为 .textContent 的答案其实是正确的
好吧@PaulTaylor，这个答案自 2010 年以来就在这里，有 92 个赞成票（现在，你的反对票）。这个问题使用了innerHTML，所以我只更改了让他的代码移动所必需的内容。虽然我觉得提出额外的想法总是可以的（“嘿，顺便说一句，使用 textcontent 而不是 innerhtml/innertext），但这不是 OP 的问题......没有必要投反对票。
好的，但是他有没有得到它的工作他最后的评论是没有任何工作，所以我的理解是你的解决方案没有工作，当然对我没有工作，看起来这个 jsfiddle.net/cfxrLpe9/4 与 textContent 但不是innerHtml，这是为什么呢？
@PaulTaylor 答案可能适用于 OP，因为他将此答案标记为已接受。您的代码中有错字。如答案所示，您使用的是 innerHtml 而不是 innerHTML。 jsfiddle.net/cfxrLpe9/6

【解决方案2】：

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

【讨论】：

.innerText 适用于标签。我在中有 Script 标签，在中有设计。尽管它对我来说很好用。
@AshwinG 你的评论救了我。我用.value为label打了我的头
尝试使用.text('Your Text')

【解决方案3】：

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

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

【讨论】：

哦，没注意到！是的，如果发布的代码反映了真实代码（不使用 jquery 来触发 document.ready 或类似代码），那么这就是它不能正常工作的原因。

【解决方案4】：

请改用.textContent。

我也在努力改变标签的值，直到我尝试了这个。

如果这不能解决，请尝试检查对象以查看可以设置的属性，方法是使用 console.dir 将其记录到控制台，如以下问题所示：How can I log an HTML element as a JavaScript object?

【讨论】：

谢谢。我怀疑（但尚未严格证实）我的用例类似于问题中的用例：我试图检索和/或更改具有嵌套输入元素的标签的文本，例如我想检索和/或更改以下内容的"enter info here:" 部分：<label id='myLabel'>enter info here:<input type='text' id='inp'/></label>。只有.textContent 有效，.innerHTML、.innerText 或 .value 均无效。（免责声明：我只检查了 Chrome。）
谢谢我遇到了同样的问题
@AndrewWillems 不幸的是 .textContent 和 .innerText（虽然适合阅读），但不适用于我的 firefox60 写作（它还删除了嵌入式输入字段，就像 .innerHTML 一样）。所以我不得不求助于document.getElementById('myLabel').childNodes[0].nodeValue="new label text"（当然，索引可能不是0，这有点笨拙但对我有用）

【解决方案5】：

使用.innerText 应该可以工作。

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

【讨论】：

【解决方案6】：

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

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

查看JsFiddle example

【讨论】：

【解决方案7】：

试试这个：

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

【讨论】：

欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【解决方案8】：

因为脚本将首先被执行。当脚本将被执行时，那时控件还没有被加载。因此，在加载控件后，您将编写一个脚本。

它会起作用的。

【讨论】：