admin管理员组

文章数量:1401499

i want to use js to add one row in an exsiting table,however i got an error:document.getElementById() is null,here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>use js to create one row</title>
</head>
<body >

<tr id="table">
    <td>row 1</td>
</tr>

<script>
    window.onload = function(){  
        var td = document.createElement("td");
        td.innerHTML = "add row";
        var tr = document.getElementById("table");
        tr.appendChild(rows); 
    }   
</script>
</body>
</html>

i want to use js to add one row in an exsiting table,however i got an error:document.getElementById() is null,here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>use js to create one row</title>
</head>
<body >

<tr id="table">
    <td>row 1</td>
</tr>

<script>
    window.onload = function(){  
        var td = document.createElement("td");
        td.innerHTML = "add row";
        var tr = document.getElementById("table");
        tr.appendChild(rows); 
    }   
</script>
</body>
</html>
  • javascript
  • html
Share Improve this question asked Dec 1, 2016 at 9:33 GxpGxp 351 gold badge1 silver badge6 bronze badges 2
  • rows is undefined in your code, and tr is invalid outside of a table. – T.J. Crowder Commented Dec 1, 2016 at 9:34
  • 1 first learn table structure and basic javascript and do some research and then ask a question at here. you could search on google for table structure : table structure in html and you could ask google : how to add a row in a table using javascript – Syed Ali Commented Dec 1, 2016 at 9:41
Add a ment  | 

1 Answer 1

Reset to default 4

Because tr is invalid outside of a table, the browser is basically ignoring the tr element entirely and just putting the text row 1 directly in body, which is why getElementById didn't return an element; it was never created by the browser when parsing the HTML.

Put the tr in a table (and ideally in a tbody):

<table>
  <tbody id="tbody">
    <tr>
      <td>row 1</td>
    </tr>
  </tbody>
</table>

and append to the tbody, being sure to create a row (tr) as well as a td since your apparent goal is to add a row:

var td = document.createElement("td");
td.innerHTML = "add row";
var tr = document.createElement("tr");
tr.appendChild(td);
document.getElementById("tbody").appendChild(tr);

It's also almost never useful to use the load event on window, since it doesn't get run until very late in the page-load process (waiting for all other resources, including all images, to load); that delay means the user can easily start interacting with your page before your code has run. Instead, use modules (which are run as soon as the DOM is in place, but not before) or just put your script at the very end of the HTML, just before the closing </body> tag.

Live example:

<table>
  <tbody id="tbody">
    <tr>
      <td>row 1</td>
    </tr>
  </tbody>
</table>
<script>
  (function() {
    var td = document.createElement("td");
    td.innerHTML = "add row";
    var tr = document.createElement("tr");
    tr.appendChild(td);
    document.getElementById("tbody").appendChild(tr); 
  })();
</script>

本文标签： javascripthow to use getElementById to get the table specified with idStack Overflow

版权声明：本文标题：javascript - how to use getElementById to get the table specified with id - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744269260a2598100.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。