Home/ Questions/Q 7492841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T16:36:44+00:00

I’m trying to apply CSS styles to page elements that are dynamically inserted in

  • 0

I’m trying to apply CSS styles to page elements that are dynamically inserted in a page, but my approach isn’t working. Using code similar to what I’ve inserted below, I notice that when I inspect element in chrome, the and tags surround the table content, but the and tags both precede the table row/table data content – e.g., the inspect element view looks like…

<span>
     <table></table>
       <tr>
           <td></td>
           <td></td>
       </tr>
<span>

Any idea why the closing table tag isn’t appearing after the table row/data tags? Also, why isn’t the background-color style being applied?

Thanks for any suggestions.

Simplified code snippets:

<script>


     function insertComments(topic_id){
            $.getJSON("getComments.py", {topic_id:topic_id, user_id:user_id}, function(data){
                 $('#tcomment_'+ topic_id).empty();
                 $('#tcomment_'+ topic_id).html('<table>');
                 for (i in data){
                   var commenter_profile_picture = data[i]["profile_picture"];
                   var commenter_name = data[i]["commenter_name"];
                   var commenter_person_id = data[i]["commenter_person_id"];
                   var comment = data[i]["comment"];
                   $('#tcomment_'+ topic_id).append('<tr><td><img src="'+commenter_profile_picture+'" height="20" width="20"></td><td>&nbsp;<a href="person.html?pID='+commenter_person_id+'">'+ commenter_name+'</a> - <span class="comment">'+comment+'</span></td></tr>');
                 }
                 $('#tcomment_'+ topic_id).append('</table>');
            });
     }

     function insertCommentContainer(topic_id){
           $("#comments").append('<span id="tcomment_'+topic_id+'" style="background-color:lightcyan;"></span>');
     }

    var topic_id = 124
    var user_id = 3

    insertCommentContainer(topic_id);
    insertComments(topic_id);

</script>

<html>
    <body>
        <div id="comments">
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('#tcomment_'+ topic_id).html('<table>');

    Completely replaces the HTML of the referenced element with a complete <table> element. It generated the closing </table> for you. Then

    $('#tcomment_'+ topic_id).append('<tr><td><img src="...

    appended its argument AFTER the last element in the DOM tree fragment already in the referenced element. This is why your table row appeared after the table.

    You should build the HTML in a variable first, and then use $(...).html( ) to set the HTML all at once.

    • 0