使用 innerHTML 无效[重复]

Posted 2023-05-07

【中文标题】使用 innerHTML 无效[重复]

【英文标题】：Using innerHTML has no effect [duplicate]

【发布时间】：2016-04-19 06:21:41

【问题描述】：

我正在尝试使用 javascript 将标题动态更改为我的网站，因此标题没有更改。为简单起见，我的 html 看起来像

&ltdiv class="container"&gt
  &lth1 id="name"&gtNic&lt/h1&g
  &ltp id="email"&gt&lt/p&gt
  &lthr&gt
&lt/div&gt

&ltscript src="js/something.js"&gt&lt/script&gt

我的 javascript 位于一个名为 something.js 的文件中，看起来像

$(document).ready(function()  
    console.log('I got run');
    $('#name').innerHTML = "YO";
    $('#email').innerHTML = "why hello";
)

出于某种原因，我在控制台中看到了日志，但 html 从未更改。为什么标题没有改变？

我确实尝试过查看堆栈溢出问题 Javascript: Does not change the div innerHTML 在这里Setting innerHTML: Why won't it update the DOM? 和许多其他人都没有解决我的问题。

【参考方案1】：

在 jQuery 中你使用 .html("text") 而不是 .innerHTML

$(document).ready(function()  
    console.log('I got run');
    $('#name').html("YO");
    $('#email').html("why hello");
)

【参考方案2】：

Jquery 没有 innerHTML 属性来设置 html，而是有方法。

如果您的内容只是纯文本，请使用 .text()

这样

 $('#name').text("YO");

如果它有 html 内容，则使用 .html()

这样

 $('#name').html("<p>YO</p>");

DEMO