change tableheader on button-click

Question

I would like to write a javascript-function which changes the name of a html-th on button-click. My problem is, that I don't know how to get the "text" of the th.

document.getElementById("id").text 

and

document.getElementById("id").value 

don't work.

Answer 1

You should use innerHTML

HTML:

<table>
  <thead>
    <tr>
      <th id="headId">Col name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Info</td>
    </tr> 
  </tbody>
</table>

<input type="button" value="Click" onclick="getHeadName()" />

JS:

function getHeadName() {
    var headName = document.getElementById("headId").innerHTML
}