Javascript change h1 text

Question

I am trying to change the text of h1 via using following code

document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

Here is the HTML code

<div id="wpbody-content">
  
  <div class="wrap">
    <h1>Text</h1>
  </div>

<div class="clear"></div></div>

But it shows me following error

TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function

Answer 1

the getElementsByClassName() method returns an array of elements. You need to refer to the first wrap element in the array, just like you are correctly doing for the h1 elements.:

document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

Answer 2

Replace getElementsByClassName("wrap") by getElementsByClassName("wrap")[0]

    document.getElementById("wpbody-content")
        .getElementsByClassName("wrap")[0]
        .getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

<div id="wpbody-content">
    <div class="wrap">
         <h1>Text</h1>

    </div>
    <div class="clear"></div>
</div>

Answer 3

You can also use getElementsByTagName:

document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

<div id="wpbody-content">
    <div class="wrap">
         <h1>Text</h1>

    </div>
    <div class="clear"></div>
</div>

Answer 4

try jQuery as

     $('#wpbody-content .wrap h1').text('Application Forms');