Appending columns to table rows with jQuery - not working

JavaScript
1

Hi everyone,
I’m trying to make a table with the results of the TwitchTv app, but for some reason my

elements aren’t being displayed properly. I checked the output and copied it directly from console to html and it works, so I think it must be something related to jQuery or the append method or DOM manipulation that I’m unaware of… can someone point me in the right direction please?
Here’s my code so far: https://codepen.io/virginiab/pen/QrdJjM

Bear in mind I just began, so it’s far from done, I just encountered this setback and want to clear it asap before moving on.

Thanks a million in advance!!
Cheers.

2

Bear in mind the green I ate an hour ago is starting to kick in, but I notice no one has answered so I will try it, even in my slightly incapacitated state.

You have:

    $("#list").append("<tr><td><img src=" +'"' + data.logo + '"' + "></td>");
    $("#list").append("<td><a href=" + '"' + data.url + '"'+ "target=" +'"' + "_blank" + '"' + ">" + data.display_name + "</a></td></tr>");

I assume what you are trying to do is create one row. This makes sense as you open the row at the beginning of the first append and close it at the end of the second append. But a simple inspect on that DOM element will show that they are getting their own rows.

I think what is happening is that each append is it’s own DOM event. The DOM doesn’t want to be incomplete so it (or someone else along the line) rectifies what it sees as a mistake, the missing </tr>. Once that is done, it is ready for the next DOM event, your second line. It does the opposite - it sees what it perceives as a mistake - a missing <tr> and “fixes” it. I’m guessing that that DOM, being made of nodes, need to be complete. Remember that you HTML is just telling the DOM what to build, but the DOM is not represented in HTML text - it gets converted into (presumably) tree data structure that the DOM uses.

Maybe someone smarter can come up with a better answer (this is a little outside my ken) but you could just combine them together:

    $("#list").append("<tr><td><img src=" +'"' + data.logo + '"' + "></td><td><a href=" + '"' + data.url + '"'+ "target=" +'"' + "_blank" + '"' + ">" + data.display_name + "</a></td></tr>");

If that is too unwieldy, I’ll often build the strings in pieces. This is more complicated than needed for this string, but it shows the idea:

    var htmlStr = "" +
          "<tr>" +
            "<td>" + 
              "<img src=" + '"' + data.logo + '"' + ">" + 
            "</td>" + 
            "<td>" + 
              "<a href=" + '"' + data.url + '"'+ "target=" +'"' + "_blank" + '"' + ">" + data.display_name + "</a>" +
              "</td>" + 
           "</tr>"
    $("#list").append(htmlStr);

This approach takes up some room on the page, but it makes it very clear what is happening, and very easy to debug. Just be sure there is a + at the end of each line so they will concat properly (been burned by that one a few times.)

3

It worked! thanks you so much! :smiley: