Dynamically adding rows to a table

Question

I'm trying to dynamically add a <tr> with two <td>s into a <table> via javascript, but my fiddle doesn't seem to do anything, does anyone see the problem?

Fiddle: https://jsfiddle.net/otL69Lpo/2/

HTML:

<button type="button" onclick="myFunction()">Click Me!</button> <table class="table table-bordered" id="chatHistoryTable"> <tr> <td> 12:30:30 </td> <td> text here </td> </table>

JS:

function myFunction() { var table = document.getElementById("chatHistoryTable"); var tr = document.createElement("tr"); var td = document.createElement("td"); var td2 = document.createElement("td"); var txt = document.createTextNode("TIMESTAMP"); var txt2 = document.createTextNode("user: text"); td.appendChild(txt); td2.appendChild(txt2); tr.appendChild(td); tr.appendChild(td2); table.appendChild(tr); }

Output should be as:

| TIMESTAMP | user: text |

I change the js load type to body in jsfiddle & it is working jsfiddle.net/otL69Lpo/3 — brk
– brk, Commented Apr 26, 2016 at 3:07

Brett DeWoody · Accepted Answer · 2016-04-26 03:11:06Z

This is a common issue in jsFiddle. There are several options for how to load the JS and you'll need to change the loading to either:

No wrap - in <head>
No wrap - in <body>

Collectives™ on Stack Overflow

Dynamically adding rows to a table

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related