如何使用 Javascript 替换/更改 <h1></h1> 中的标题文本？答案

【问题标题】：How Do I Replace/Change The Heading Text Inside <h1></h1>, Using Javascript?如何使用 Javascript 替换/更改 <h1></h1> 中的标题文本？
【发布时间】：2013-08-20 11:52:16
【问题描述】：

如何更改/替换文本：“Hello”，使用 javascript 说“再见”？

<h1 class="titlearea win-type-ellipsis" id="title">
     <span class="pagetitle" >
            Hello
     </span>
</h1>

【问题讨论】：

您明确提到了 javascript，但请考虑使用 jQuery，它会让您的 javascript 编码生活更轻松
真的需要内跨度吗？ .pagetitle 是否还有更多元素？
@DaniëlTulp 更不用说为极其简单的任务添加毫无意义的开销
如果这是唯一的 javascript 任务，当然，但我认为对于大多数现代网站/应用程序来说，它不是，因为 jQuery 库被广泛使用，CDN 可用并且缩小包非常小，我从不考虑使用它

标签： javascript html html-heading

【解决方案1】：

document.getElementsByClassName("pagetitle")[0].innerHTML = "Goodbye";

这里是a working fiddle。

【讨论】：

我们不知道它是页面上的第一个 - 此代码当前假设的是（当然它应该来自名称......但是......）

【解决方案2】：

document.getElementById('title').getElementsByTagName('span')[0].innerHTML = 'Goodbye';

【讨论】：

【解决方案3】：

如果您愿意为旧版浏览器提供支持（首选）：

document.querySelector('#title .pagetitle').innerHTML = 'Goodbye';

支持：

Chrome  Firefox (Gecko)  Internet Explorer  Opera  Safari (WebKit)
1       3.5 (1.9.1)      8                  10     3.2 (525.3)
        bug 416317                                 WebKit bug 16587

另请参阅：document.querySelectorAll

【讨论】：

嗯，它有标签html5
值得推动新技术:)

【解决方案4】：

document.getElementsByClassName("pagetitle")[0].textContent = "Goodbye";

或

document.getElementsByClassName("pagetitle")[0].innerHTML = "Goodbye";

或

document.getElementById('title').getElementsByTagName('span')[0].textContent = 'Goodbye';

或

document.getElementById('title').getElementsByTagName('span')[0].innerHTML = 'Goodbye';

或

document.getElementById('title').getElementsByClassName("pagetitle")[0].textContent = "Goodbye";

或

document.getElementById('title').getElementsByClassName("pagetitle")[0].innerHTML = "Goodbye";

【讨论】：

【解决方案5】：

这里是JSBin

使用 getElementsByTagName('span')

进行更改

document.getElementsByTagName('span')[0].innerHTML = 'Goodbye';

【讨论】：

【解决方案6】：

根据XSS vulnerability，不建议使用innerHTML，旧版本的浏览器（例如IE8）不支持textContent。所以创建一个TextNode会更好

element = document.getElementByClassName("pagetitle");
txt = document.createTextNode("GoodBye");
element.appendChild(txt);

【讨论】：