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?
This question is related to
javascript
html
If your <td> is not empty, one popular trick is to insert a non breaking space in it, such that:
<td id="td1"> </td>
Then you will be able to use:
document.getElementById('td1').firstChild.data = 'New Value';
Otherwise, if you do not fancy adding the meaningless   you can use the solution that Jonathan Fingland described in the other answer.
append a text node as follows
var td1 = document.getElementById('td1');
var text = document.createTextNode("some text");
td1.appendChild(text);
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)
Source: Stackoverflow.com