使用JavaScript更改标签文本

90

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

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

— 菲尔·克劳
source

1

哎呀！抱歉，应该为“不”； 0

— 菲尔·克劳

4

因为当您编写脚本尝试更改标签innerHtml时，lbltipAddedComment实际上不在页面上。在标签后插入脚本或使用jquery $ {document）.ready（）

— Andrew Orsich 2010年

抱歉，没有看到编辑按钮！

— 菲尔·克洛

我尝试了这里建议的所有内容，但对我没有用。

— 拉詹·米什拉

137

因为您的脚本在运行之前运行，所以标签存在于页面中（在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>

此示例（jsfiddle链接）维护顺序（先写脚本，再写标签），并使用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>

— Konerak
source

我认为.textContent答案实际上是正确的答案

— Paul Taylor

1

@PaulTaylor，这个答案自2010年以来一直存在，共有92票赞成（现在是您的票赞成）。这个问题使用了innerHTML，所以我只更改了使他的代码移动所需的内容。虽然我觉得总是可以建议其他想法（“嘿，顺便说一句，使用textcontent而不是innerhtml / innertext），但这不是OP的问题...没有必要

— 投票。– Konerak

好的，但是他有没有成功呢？他的最后一条评论是什么都没起作用，所以我的理解是您的解决方案没有用，从某种意义上说对我没有用，看起来jsfiddle.net/cfxrLpe9/4可以用于textContent但不能用于innerHtml，为什么那？

— 保罗·泰勒

@PaulTaylor答案可能对OP有用，因为他将此答案标记为已接受。您的代码中有错字。答案显示，您使用的是innerHtml而不是innerHTML。jsfiddle.net/cfxrLpe9/6

— Randall Flagg

22

您尝试过.innerText还是.value代替.innerHTML？

— 高登
source

.innerText用于标签。我在<Head>中有Script标签，在<body>中有设计。尽管它对我来说很好。

— 2014年

@AshwinG您的评论救了我。我.value为label

— Prabs '16

尝试使用.text('Your Text')

— 偷偷摸摸的

15

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

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

— 姆拉迪奇
source

1

哦，没注意到！是的，如果发布的代码反映了真实的代码（未使用jquery在document.ready或类似文件上触发），那么这就是为什么它也无法正常工作的原因。

— GordonM 2010年

9

使用 .textContent代替。

在尝试更改标签之前，我也一直在努力更改标签的值。

如果仍不能解决问题，请尝试检查该对象，以查看可以通过将其记录到控制台来设置哪些属性，console.dir如以下问题所示：如何将HTML元素记录为JavaScript对象？

— 波奇
source

谢谢。我怀疑（但未严格确认）我的用例与问题类似：我试图检索和/或更改具有嵌套输入元素的标签的文本，例如，我想检索和/或更改以下"enter info here:"部分：<label id='myLabel'>enter info here:<input type='text' id='inp'/></label>。只有.textContent工作，没有的.innerHTML，.innerText或者.value工作。（免责声明：我只检查了Chrome。）

— Andrew Willems

谢谢，我遇到了同样的问题

— Paul Taylor

2

不幸的是.textContent，@ AndrewWillems和.innerText（虽然很适合阅读）对于我的firefox60不能用于写工作（它也清除了嵌入式输入字段，就像.innerHTML）。因此，我不得不document.getElementById('myLabel').childNodes[0].nodeValue="new label text"

— 求助

8

使用.innerText应该有效。

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

— 希尔帕
source

7

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

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

查看JsFiddle示例

— 芥菜
source

0

试试这个：

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

— 用户名
source

1

欢迎使用指向解决方案的链接，但是请确保没有该链接的情况下，您的回答是有用的：在链接周围添加上下文，以便您的其他用户可以了解它的含义和含义，然后引用您所使用页面中最相关的部分如果目标页面不可用，请重新链接。只是链接的答案可能会被删除。

— paper1111

0

因为该脚本将首先执行。.当该脚本将被执行时，此时不会加载控件。因此，在加载控件之后，您需要编写脚本。

会的。

— 拉查那
source