CODEWITHSUNDEEP
javascripthtmlhtml-heading
noobprogrammer
noobprogrammer

Reputation: 1154

How Do I Replace/Change The Heading Text Inside <h1></h1>, Using Javascript?

How do I change/replace the text: "Hello" using javascript to say "Goodbye" instead?

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

Upvotes: 4

Views: 22757

Answers (6)

Olympic Bear
Olympic Bear

Reputation: 15

Using innerHTML is not recommended according to XSS vulnerability, textContent is not supported by older version of browsers (ex. IE8). So will be better to create a TextNode

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

Upvotes: 0

Runedrake
Runedrake

Reputation: 21

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

or

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

or

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

or

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

or

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

or

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

Upvotes: 1

Emissary
Emissary

Reputation: 10138

If you're happy to give legacy browsers the finger (preferable):

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

Support: 

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

See also: document.querySelectorAll

Upvotes: 1

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

Here is JSBin

Change by using getElementsByTagName('span')

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

Upvotes: 0

Mithun Satheesh
Mithun Satheesh

Reputation: 27835

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

Here is a working fiddle.

Upvotes: 7

MDEV
MDEV

Reputation: 10838

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

Upvotes: 3

Related Questions