I need to change the content of all "h1" tags in my html file when the page load using javascript.

So I write the following code

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

    h1html.appendChild(h1htmltext);

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

I need to change the content of all "h1" tags in my html file when the page load using javascript.

So I write the following code

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

    h1html.appendChild(h1htmltext);

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

• javascript

4 Answers 4

If you're sure you only have one h1 tag you could simply do

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

if multiple h1 tags are present you could do

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

Use this:

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

fiddle

You need to change the innerHTML of each elements, as such

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

getElementsByTagName returns a node list; you need to loop through it.

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);
}

I made a few assumptions there:

• You don’t actually want to nest headers
• You want to replace the content
• You want an old-standards-pliant way

If you don’t need support for old browsers, just use textContent:

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

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