如何使用javascript更改html页面的“h1”标签的内容？

Question

当我使用javascript加载页面时，我需要更改HTML文件中所有“h1”标签的内容。

所以我写了下面的代码

window.onload = function() { 
    var h1html = document.createElement("h1"); 
    var h1htmltext = document.createTextNode("header 1"); 

    h1html.appendChild(h1htmltext); 

    document.getElementsByTagName("h1").appendChild(h1html); 
}; 

Answer 1

使用此：

for(var i = 0, elems = document.getElementsByTagName('h1'); i < elems.length; i++) { 
    elems[i].innerHTML = "new"; 
} 

fiddle

Answer 2

如果你确定你只有一个h1标签，你可以简单地做

window.onload = function() { 
    document.getElementsByTagName("h1")[0].innerHTML = "header 1"; 
} 

如果多个h1标签都存在，你可以做

window.onload = function() { 
    var h1Elems = document.getElementsByTagName("h1"); 
    var pos; 
    for (pos in h1Elems) { 
     h1Elems[pos].innerHTML = "header 1"; 
    } 
} 

Answer 3

您需要更改每个元素的innerHTML，如su CH

function changeall(){ 
    var headers=document.getElementsByTagName("h1"); 
    var newheadertext="hello"; 
    for(var i in headers){ 
     headers[i].innerHTML=newheadertext; 
    } 
} 

Answer 4

getElementsByTagName返回一个节点列表;你需要循环它。

var headers = document.getElementsByTagName("h1"); 

for(var i = 0; i < headers.length; i++) { 
    var header = headers[i]; 
    var text = document.createTextNode("header 1"); 

    while(header.childNodes.length) { 
     header.removeChild(header.firstChild); 
    } 

    header.appendChild(text); 
} 

我做了一些假设有：

• 你不会真的想窝头
• 要替换的内容
• 你想要一个旧标准兼容的方式

如果你不需要老浏览器的支持，只需使用textContent：

var headers = document.getElementsByTagName("h1"); 

for(var i = 0; i < headers.length; i++) { 
    headers[i].textContent = "header 1"; 
}