I am trying to add table in HTML using JavaScript

Question

 $(document.ready(function() { var laterbox = document.getElementById('laterbox'); var tabl = document.createElement('table'); var trh = document.createElement('tr'); var trd = document.createElement('tr'); var txt = document.createTextNode('book_id'); var tr1 = document.createElement('th'); tr1.appendChild(txt); trh.appendChild(tr1); tabl.appendChild(trh); tabl.appendChild(trd); laterbox.appendChild(tabl); })); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="laterbox"> <table> <tr> <th>aa</th> <th>bb</th> </tr> <tr> </tr> </table> </div> 

But the second table does't display, I don't know why. I tried many times but could not find the error. You can see the output here: https://codepen.io/sandesh_bafna8/pen/BwQZGv

Answer 1

You don't have ) in your document and extra ) at the end. Remove it and it will work..

  $(document).ready(function(){ var laterbox=document.getElementById('laterbox'); var tabl=document.createElement('table'); var trh=document.createElement('tr'); var trd=document.createElement('tr'); var txt=document.createTextNode('book_id'); var tr1=document.createElement('th'); tr1.appendChild(txt); trh.appendChild(tr1); tabl.appendChild(trh); tabl.appendChild(trd); laterbox.appendChild(tabl); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="laterbox"> <table> <tr> <th>aa</th> <th>bb</th> </tr> <tr> </tr> </table> </div> 

Tip: If your code is not working try to look at the console if there is an error.. Missing or extra bracket and parenthesis will be displayed as an error in there..

Answer 2

 $(document).ready(function() { var laterbox = document.getElementById('laterbox'); var tabl = document.createElement('table'); var trh = document.createElement('tr'); var trd = document.createElement('tr'); var txt = document.createTextNode('book_id'); var tr1 = document.createElement('th'); tr1.appendChild(txt); trh.appendChild(tr1); tabl.appendChild(trh); tabl.appendChild(trd); laterbox.appendChild(tabl); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="laterbox"> <table> <tr> <th>aa</th> <th>bb</th> </tr> <tr> </tr> </table> </div> 

$(document.ready(function() { => $(document).ready(function() {

Answer 3

You have some typo errors:

1. $(document.ready(function() { should be $(document).ready(function() {

2. Closing })); should be });

Here is the corrected code:

 $(document).ready(function() { var laterbox=document.getElementById('laterbox'); var tabl=document.createElement('table'); var trh=document.createElement('tr'); var trd=document.createElement('tr'); var txt=document.createTextNode('book_id'); var tr1=document.createElement('th'); tr1.appendChild(txt); trh.appendChild(tr1); tabl.appendChild(trh); tabl.appendChild(trd); laterbox.appendChild(tabl); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="laterbox"> <table> <tr> <th>aa</th> <th>bb</th> </tr> <tr> </tr> </table> </div>