How to insert text in a td with id, using JavaScript

Question

I know it may be a simple thing, but I can't figure out. I am trying to insert some text coming from a JavaScript function onload event into a td.

<html>
 <head>
  <script type="text/javascript">
   function insertText ()
   {
       //function to insert any text on the td with id "td1"
   }
  </script>
 </head>
 <body onload="javascript:insertText()">
  <table>
   <tr>
    <td id="td1">
    </td>
   </tr>
  </table>
 </body>
</html>

Any help?

Make sure that the second tag is actually , and the same with the closing tag. Maybe that's just a typo when you put it into the question, but you never know. — David Kolar, Jan 29 '10 at 17:14

score 98 · Accepted Answer · edited Jun 05 '14 at 17:18

98

<html>

<head>
<script type="text/javascript">
function insertText () {
    document.getElementById('td1').innerHTML = "Some text to enter";
}
</script>
</head>

<body onload="insertText();">
    <table>
        <tr>
            <td id="td1"></td>
        </tr>
    </table>
</body>
</html>

edited Jun 05 '14 at 17:18

dertkw

7,798
5
37
45

answered Jan 29 '10 at 17:17

artlung

33,305
16
69
121

I have to note that ie <= 9 don't let you do innerHTML for table elements – Denis Apr 29 '15 at 18:17
@Denis do you have a cite for that? This was done for a table cell `` element not a whole table or table body element. – artlung Apr 30 '15 at 19:26
1

Well, I admit my mistake, innerHTML to td really works in ie9, but all other elements of the table are read-only http://stackoverflow.com/a/4729743/1221082 – Denis May 01 '15 at 17:38
take care of content to avoid XSS – gdm Jan 22 '19 at 15:32

score 35 · Answer 2 · edited Jan 29 '10 at 17:15

35

append a text node as follows

var td1 = document.getElementById('td1');
var text = document.createTextNode("some text");
td1.appendChild(text);

edited Jan 29 '10 at 17:15

Daniel Vassallo

337,827
72
505
443

answered Jan 29 '10 at 17:07

Jonathan Fingland

56,385
11
85
79

2

The important feature of this solution is that it does not destroy the current contents of the parent element. – Pistos Jun 30 '16 at 13:26

score 17 · Answer 3 · edited Jun 16 '13 at 11:49

17

There are several options... assuming you found your TD by var td = document.getElementyById('myTD_ID'); you can do:

td.innerHTML = "mytext";
td.textContent= "mytext";
td.innerText= "mytext"; - this one may not work outside IE? Not sure
Use firstChild or children array as previous poster noted.

If it's just the text that needs to be changed, textContent is faster and less prone to XSS attacks (https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent)

edited Jun 16 '13 at 11:49

Simon Fermor

116
1
11

answered Jan 29 '10 at 17:11

DVK

126,886
32
213
327

1

For some reason I get Object doesnt support this property or method. But thanks anyway. – Amra Jan 29 '10 at 17:15
Any that are preceded by getElement -> y <- ById. – David Kolar Jan 29 '10 at 17:27

score 4 · Answer 4 · edited May 23 '17 at 12:17

4

If your <td> is not empty, one popular trick is to insert a non breaking space   in it, such that:

 <td id="td1">&nbsp;</td>

Then you will be able to use:

 document.getElementById('td1').firstChild.data = 'New Value';

Otherwise, if you do not fancy adding the meaningless &nbsp you can use the solution that Jonathan Fingland described in the other answer.

edited May 23 '17 at 12:17

Community

1
1

answered Jan 29 '10 at 17:04

Daniel Vassallo

337,827
72
505
443

score 3 · Answer 5 · answered Jan 29 '10 at 17:06

3

Use jQuery

Look how easy it would be if you did.

Example:

$('#td1').html('hello world');

answered Jan 29 '10 at 17:06

Gabe

49,577
28
142
181

old post, but still: you should never use jquery for those very easy things. it´s not even less code with jquery. – andyrandy Feb 03 '17 at 10:52
@luschn what if their site already uses JQuery heavily and its already loaded. Your statement is very broad. Never? – M H Sep 18 '17 at 19:34
1

yes, never ;) - even if the site already uses jquery, you should aim for using vanilla js, because it is faster. and maybe you want to remove the jquery dependency sooner or later. – andyrandy Sep 19 '17 at 07:42
@luschn one of jquery's aim is to remove cross browser issues. Depending on the application of jquery/js the performance difference is moot. – Gabe Oct 12 '17 at 21:10
there are no real issues with cross browser issues anymore. you should not support IE8 ;) - anyway, for the very simple task of adding some text to a html tag, it is really pointless to use jquery imho. people don´t really learn javascript that way, they just learn how to use a tool that just takes more download time with the same amount of code ;) - just my opinion though :) – andyrandy Oct 13 '17 at 07:16
@luschn - you're in denial, there are still some cross browser problems even today. And considering this post what over 7+ years ago, you're late to game on this answer. – Gabe Oct 17 '17 at 16:16
there are NO cross browser problems with setting html to a div with an id ;) - even 7+ years ago, this was already a bad idea and no problem at all for all browsers. but again, just my opinion. – andyrandy Oct 18 '17 at 07:49

How to insert text in a td with id, using JavaScript

5 Answers5

Linked