如何使用Javascript替换/更改<h1> </h1>内的标题文本?

时间:2013-08-20 11:52:16

标签: javascript html html5 html-heading

如何更改/替换文本:“Hello”使用javascript代替说“再见”?

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

6 个答案:

答案 0 :(得分:7)

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

这是a working fiddle

答案 1 :(得分:3)

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

答案 2 :(得分:1)

如果您愿意接受传统浏览器(最好):

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

答案 3 :(得分:1)

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";

答案 4 :(得分:0)

这是JSBin

使用 getElementsByTagName('span')

进行更改
document.getElementsByTagName('span')[0].innerHTML = 'Goodbye';

答案 5 :(得分:0)

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

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