You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++) {
  var tr = document.createElement('tr');

  var td1 = document.createElement('td');
  var td2 = document.createElement('td');

  var text1 = document.createTextNode('Text1');
  var text2 = document.createTextNode('Text2');

  td1.appendChild(text1);
  td2.appendChild(text2);
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.body.appendChild(table);

Answer from Krzysztof on Stack Overflow
Top answer
1 of 10
95

You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++) {
  var tr = document.createElement('tr');

  var td1 = document.createElement('td');
  var td2 = document.createElement('td');

  var text1 = document.createTextNode('Text1');
  var text2 = document.createTextNode('Text2');

  td1.appendChild(text1);
  td2.appendChild(text2);
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.body.appendChild(table);

2 of 10
28

It is because you're only creating two td elements and 2 text nodes.


Creating all nodes in a loop

Recreate the nodes inside your loop:

var tablearea = document.getElementById('tablearea'),
    table = document.createElement('table');

for (var i = 1; i < 4; i++) {
    var tr = document.createElement('tr');

    tr.appendChild( document.createElement('td') );
    tr.appendChild( document.createElement('td') );

    tr.cells[0].appendChild( document.createTextNode('Text1') )
    tr.cells[1].appendChild( document.createTextNode('Text2') );

    table.appendChild(tr);
}

tablearea.appendChild(table);

Creating then cloning in a loop

Create them beforehand, and clone them inside the loop:

var tablearea = document.getElementById('tablearea'),
    table = document.createElement('table'),
    tr = document.createElement('tr');

tr.appendChild( document.createElement('td') );
tr.appendChild( document.createElement('td') );

tr.cells[0].appendChild( document.createTextNode('Text1') )
tr.cells[1].appendChild( document.createTextNode('Text2') );

for (var i = 1; i < 4; i++) {
    table.appendChild(tr.cloneNode( true ));
}

tablearea.appendChild(table);

Table factory with text string

Make a table factory:

function populateTable(table, rows, cells, content) {
    if (!table) table = document.createElement('table');
    for (var i = 0; i < rows; ++i) {
        var row = document.createElement('tr');
        for (var j = 0; j < cells; ++j) {
            row.appendChild(document.createElement('td'));
            row.cells[j].appendChild(document.createTextNode(content + (j + 1)));
        }
        table.appendChild(row);
    }
    return table;
}

And use it like this:

document.getElementById('tablearea')
        .appendChild( populateTable(null, 3, 2, "Text") );

Table factory with text string or callback

The factory could easily be modified to accept a function as well for the fourth argument in order to populate the content of each cell in a more dynamic manner.

function populateTable(table, rows, cells, content) {
    var is_func = (typeof content === 'function');
    if (!table) table = document.createElement('table');
    for (var i = 0; i < rows; ++i) {
        var row = document.createElement('tr');
        for (var j = 0; j < cells; ++j) {
            row.appendChild(document.createElement('td'));
            var text = !is_func ? (content + '') : content(table, i, j);
            row.cells[j].appendChild(document.createTextNode(text));
        }
        table.appendChild(row);
    }
    return table;
}

Used like this:

document.getElementById('tablearea')
        .appendChild(populateTable(null, 3, 2, function(t, r, c) {
                        return ' row: ' + r + ', cell: ' + c;
                     })
        );
🌐
W3Schools
w3schools.com › jsref › dom_obj_table.asp
HTML DOM Table Object
var x = document.createElement("TABLE"); Try it Yourself » · The Table object also supports the standard properties and events. ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · If you want to report an error, or if you want to make a suggestion, send us an e-mail: help@w3schools.com · HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial
Discussions

Dynamic Tables with Javascript
let table = document.getElementById("pointData") // takes a string as an argument you are passing the name of a variable, pointData, which is null. So you are calling document.getElementById("pointData"), which returns null, and then you are calling appendChild on a null reference. More on reddit.com
🌐 r/learnjavascript
2
2
August 13, 2022
Build a dynamic table based on Json response.

You could use conditional rendering leveraging Javascript. Assuming a functional component, inside your return:

return(
{ response?.students?.length > 1 &&  (<div>...your table here... </div>)}
)

The table will be shown only if both sides of the && are true, so only if there is more than 1 students.

More on reddit.com
🌐 r/react
6
6
August 24, 2022
Any way to create a dynamic table (that always lists the top liked site by order) ? I want people to be able to vote on the page directly which will affect the position of the site in the table. Preferably HTML5, Javascript, etc.

Sure. Imagine that each row is an object in an array.

[
    {
        name: "Cleetus' stinky underwear",
        description: "A place to buy nasty stinky underwear",
        likes: 420,
       ...
    },
   ...
[

Use javascript to sort it by Likes and render it on the page. If you actually want this to be functional you'll need a back-end as well and a database where your websites are stored.

More on reddit.com
🌐 r/html5
7
15
February 18, 2022
Dynamic load of html table

Yeah it's probably possible, but you haven't provided enough info to give you a more specific answer.

More on reddit.com
🌐 r/learnjavascript
5
2
July 27, 2022
🌐
Mysamplecode
mysamplecode.com › 2012 › 04 › generate-html-table-using-javascript.html
Programmers Sample Guide: Dynamically generate HTML table using JavaScript - document.createElement() method
function addRow() { var myName = document.getElementById("name"); var age = document.getElementById("age"); var table = document.getElementById("myTableData"); var rowCount = table.rows.length; var row = table.insertRow(rowCount); row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; row.insertCell(1).innerHTML= myName.value; row.insertCell(2).innerHTML= age.value; } function deleteRow(obj) { var index = obj.parentNode.parentNode.rowIndex; var table = document.getElementById("myTableData"); table.deleteRow(index); } function addTable() { va
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Document_Object_Model › Building_and_updating_the_DOM_tree
Building and updating the DOM tree - Web APIs | MDN
October 20, 2025 - You can build this table and its internal child elements by using just a few DOM methods. Remember to keep in mind the tree model for the structures you are planning to create; this will make it easier to write the necessary code. In the <table> tree of Figure 1 the element <table> has one ...
🌐
W3Schools
w3schools.com › jsref › met_table_insertrow.asp
HTML DOM Table insertRow() Method
The insertRow() method creates an empty <tr> element and adds it to a table.
🌐
ASPSnippets
aspsnippets.com › Articles › 906 › Create-dynamic-Table-in-HTML-at-runtime-using-JavaScript
Create dynamic Table in HTML at runtime using JavaScript
February 26, 2019 - GenerateTable JavaScript function, first a JSON Array is created. The JSON Array contains the Table Header and Cell values. ... The Header Row will be built using the first element of the Array as it contains the Header column text values.
🌐
Seldom India
seldomindia.com › create-dynamic-html-table-using-html-css-and-javascript
Create Dynamic HTML Table Using HTML, CSS and JavaScript. | Seldom India
September 28, 2024 - In this tutorial, we will explore the process of creating a dynamic HTML table using a combination of HTML, CSS, and JavaScript. We will guide you through each step, providing detailed explanations and code examples along the way.
Find elsewhere
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Document_Object_Model › Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
Traversing an HTML table with JavaScript and DOM Interfaces
You can build this table and its internal child elements by using just a few DOM methods. Remember to keep in mind the tree model for the structures you are planning to create; this will make it easier to write the necessary code. In the <table> tree of Figure 1 the element <table> has one ...
🌐
YouTube
youtube.com › web hub
How to create Dynamic HTML Table using Javascript | HTML Table - YouTube
The TABLE tag defines an HTML table.Each table row is defined with a TR tag. Each table header is defined with a TH tag. Each table data/cell is defined with...
Published   August 9, 2021
Views   3K
🌐
CodePen
codepen.io › corneliuschopin › pen › bGvLEb
Creating A Dynamic Table with JavaScript
This tutorial will show you how to create a dynamic table with HTML, CSS and JavaScript....
🌐
YouTube
youtube.com › dylan israel
Build a Dynamic Table with Sorting | HTML, CSS & JavaScript Frontend Mini Projects | Dylan Israel - YouTube
Build a Dynamic Table with Sorting | HTML, CSS & JavaScript Frontend Mini Projects | Dylan Israel Thank you to our sponsor: https://www.DevMountain.com ► MY ...
Published   March 12, 2019
Views   36K
🌐
Plain English
plainenglish.io › home › blog › javascript › creating a dynamic html table with javascript
Creating a dynamic HTML table with JavaScript
September 25, 2020 - This tutorial will teach you how to create a dynamic HTML table through the use of Javascript and Document Object Model (DOM) manipulation.
🌐
Delft Stack
delftstack.com › home › howto › javascript › javascript create table dynamically
How to Create Table Dynamically in JavaScript | Delft Stack
February 2, 2024 - Once it was ready, we realized that there were errors in our code written dynamically. ... var table = document.createElement('table'); var tr = document.createElement('tr'); var array = ['ID', 'FirstName', 'LastName', 'Gender']; for (var j = 0; j < array.length; j++) { var th = document.createElement('th'); // column var text = document.createTextNode(array[j]); // cell th.appendChild(text); tr.appendChild(th); } table.appendChild(tr); for (var i = 0; i < array.length; i++) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); var td2 = document.createElement('td');
🌐
CodeWithFaraz
codewithfaraz.com › home › components › create dynamic html table using html, css and javascript
Create Dynamic HTML Table Using HTML, CSS and JavaScript
June 11, 2025 - Learn how to create a dynamic HTML table using HTML, CSS, and JavaScript. This step-by-step tutorial guides you through building an interactive table with features like adding, deleting, and editing rows.
🌐
GitHub
gist.github.com › etigui › 74980eed346a3dbed13f3c48ee4b1e8d
Creating HTML table dynamically using javascript · GitHub
Creating HTML table dynamically using javascript. GitHub Gist: instantly share code, notes, and snippets.
🌐
W3Schools
w3schools.com › html › html_tables.asp
HTML Tables
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
🌐
Bit Level Code
bitlevelcode.com › home › javascript › how to create dynamic html table using javascript
How to Create Dynamic HTML Table Using JavaScript
December 9, 2025 - In this comprehensive guide, we’ll show you how to create a dynamic HTML table using JavaScript, including step-by-step instructions, clean code snippets, and real-world use cases.
🌐
Medium
medium.com › @mcodrescu › create-dynamic-html-tables-9205cd66cb05
Create Dynamic HTML Tables. One common problem while working with… | by Marcus Codrescu | Medium
June 7, 2022 - With the following JavaScript code, you can take an array of objects and fill an HTML table dynamically.
🌐
Reddit
reddit.com › r/learnjavascript › dynamic tables with javascript
r/learnjavascript on Reddit: Dynamic Tables with Javascript
August 13, 2022 -

I am trying to create a dynamic table that updates based on the number user selected items in the webpage.

I have the following code, where allSelectedPnts dynamically updates:

for ( const pnt of allSelectedPnts ) {

let table = document.getElementById(pointData) let row = document.createElement('tr'); let Xpnt = pnt.geometry.attributes.position.array[0] let Ypnt = pnt.geometry.attributes.position.array[1] let Xdata = document.createElement('td') let Ydata = document.createElement('td') Xdata.innerHTML = Xpnt Ydata.innerHTML = Ypnt console.log(Xdata) row.appendChild(Xdata) row.appendChild(Ydata) table.appendChild(row)   console.log(table) }

Relevant html:

<table id="pointInfo">

<thead> <th>X</th> <th>Y</th> </thead> <tbody id="pointData">

</tbody> </table> </div>

I get a console log error of :

Cannot read properties of null (reading 'appendChild')at this line: table.appendChild(row)  

Any ideas how to fix? I have tried appending to both pointData and pointInfo, I am not sure what I am doing wrong. Console logging both piontData and pointInfo yield null, this is more than likely the problem.

Full code here.