Traversing a table using Javascript to append column

Question

I'm trying to append a particular column in a table. The table has certain rows and each row has two columns. So what I want is to alter the inner text of the first <Td> element of a particular row depending on the selected second column element.

Let's say the table is like this:

    <table  id="info" style="width:500px;position:relative;margin:0 auto;">
    <tr><td><b>Personal Information</b><br /><br /></td>
    </tr>
    <tr><td>Title</td><td><input type="text" id="title" name="title" /></td></tr>
    </table>

and the Javascript I'm trying is this:

document.getElementById("title").parentNode.parentNode.cells[0].innerHTML(" sometext");

so basically if this script runs the markup for the table should be:

<table  id="info" style="width:500px;position:relative;margin:0 auto;">
<tr><td><b>Personal Information</b><br /><br /></td>
</tr>
<tr><td>Title sometext</td><td><input type="text" id="title" name="title" /></td>  </tr>
</table>

Help me out here!

Answer 1

Try,

document.getElementById("title").
    parentNode.parentNode.cells[0].innerHTML += " sometext";

DEMO