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

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?

337554 次浏览

小开

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.

小开

Use jQuery

Look how easy it would be if you did.

Example:

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

小开

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)

小开

最佳答案

<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>