jQuery showing HTML in somewhat different manner than the code with HTML only

[Jack_Tauson_Sr]

I have this JSFiddle which shows the HTML as expected :

However, when I tried to use jQuery to display the same HTML as shown in the JSFiddle here, it started displaying the output in the following manner with so much space.

What am I doing wrong in the jQuery part? Thanks

[m3g4p0p]

Hi @Jack_Tauson_Sr, you can see the problem if you inspect the table with the dev tools:

So you’re appending everything directly to the table, rather than tds to trs etc. Now you can traverse the created elements like so:

$('#refHeading')
  .append('<tr height="30">')
  .find('tr')
    .last()
    .append('<td width="33%" align="left"><u><b>Summary, Testing, etc.. </b></u><br></td>') 
  .end()
  .append('<tr>')
  .append('<tr height="5px"></tr>')
  .find('tr')
    .last()
    // ...

… but for the sake of readability I’d rather create the table tree from a single HTML string, if this is an option.

[Jack_Tauson_Sr]

Hi @m3g4p0p, Thanks for your answer. That makes sense.

I think this is what you were referring to.Yes, I can have everything in a single string like this:

$('#refHeading')
  .append('<tr height="30"><td width="33%" align="left"><u><b>Summary, Testing, etc.. </b></u><br></td></tr><tr height="5px"></tr><tr><td title="Counts of total cars - Decending Order  " width="33%" style="padding-left:40px;"><ul style="list-style-type:  disc"><li>Counts of total cars - Decending Order  </li><ul></td><td width="33%" align="left"><img src="images/DownloadImage.jfif" title="Download" alt="Download" width="20" height="20"></td></tr>')

Because, ultimately, I am planning to populate few things (like Summary, Testing, etc.. , title="Counts of total cars - Decending Order ) dynamically by looping a json response so that I can have multiple tables one above another just like we discussed here. Thanks again for answering ! Is this JSON response good to generate? - #9 by m3g4p0p