使用 JavaScript 更改标签文本

IT技术 javascript html label innerhtml
2021-01-19 18:34:37

为什么以下对我不起作用?

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

因为您的脚本在标签存在于页面上(在 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>
好吧,但他有没有让它工作,他的最后一条评论是没有任何效果,所以我的理解是你的解决方案没有工作,当然对我不起作用,看起来这个jsfiddle.net/cfxrLpe9/4使用 textContent 而不是innerHtml,为什么那 ?
2021-03-21 18:34:37
@PaulTaylor 该答案可能适用于 OP,因为他将此答案标记为已接受。你的代码有错别字。如答案所示,您使用的是innerHtml 而不是innerHTML。jsfiddle.net/cfxrLpe9/6
2021-03-22 18:34:37
我认为 .textContent 答案实际上是正确的
2021-03-24 18:34:37
好吧@PaulTaylor,这个答案自 2010 年以来就在这里,有 92 个赞成票(现在是您的反对票)。这个问题使用了innerHTML,所以我只改变了让他的代码移动所必需的东西。虽然我觉得提出额外的想法总是可以的(“嘿,顺便说一句,使用 textcontent 而不是 innerhtml/innertext),但这不是 OP 的问题......没有必要投票。
2021-04-05 18:34:37

你试过.innerText还是.value代替.innerHTML

.innerText 适用于标签。我在 <Head> 中有 Script 标签,在 <body> 中有设计。尽管它对我来说很好用。
2021-03-16 18:34:37
@AshwinG 你的评论救了我。我被揍了我的头.valuelabel
2021-03-27 18:34:37
尝试使用 .text('Your Text')
2021-04-14 18:34:37

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

<label id="lbltipAddedComment"></label>
<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
哦,没注意!是的,如果发布的代码反映了真实的代码(不使用 jquery 来触发 document.ready 或类似的代码),那么这就是它不能正常工作的原因。
2021-03-30 18:34:37

使用.textContent来代替。

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

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

谢谢我遇到了同样的问题
2021-03-18 18:34:37
谢谢你。我怀疑(但没有严格确认)我的用例与问题中的用例相似:我试图检索和/或更改具有嵌套输入元素的标签的文本,例如我想检索和/ 或更改以下"enter info here:"部分:<label id='myLabel'>enter info here:<input type='text' id='inp'/></label>. .textContent工作,没有.innerHTML.innerText.value工作。(免责声明:我只检查了 Chrome。)
2021-03-23 18:34:37
@AndrewWillems不幸.textContent.innerText(同时读取罚款),对我的工作firefox60写(也被擦除嵌入式输入字段,就像没有.innerHTML)。所以我不得不求助于document.getElementById('myLabel').childNodes[0].nodeValue="new label text"(当然,索​​引可能不是 0,这有点笨拙,但对我有用)
2021-04-12 18:34:37

使用.innerText应该有效。

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