0

I have a table where I am inserting data into the table from a query. Because I am treating every key and pair as a text when I insert the image it is returning [object HTMLImageElement]. Because I am converting it to text after the fact it is not rendering properly. Is there a better way of doing this?

            if (condition) == 1) {
               var image = document.createElement("img");
               image.src = "source1.png";

             } else if (condition) == 0 ) {
               var image = document.createElement("img");
               image.src = "source2.png";
             }

             let Table = [

               {'First Text Item': 'Text Result'),
               'Second Text Item': 'Text Result',
               'Third Text Item': 'Text Result',
               'Fourth Text Item': 'Text Result',
               'Fifth Text Item': 'Text Result',
               'Image': image},

             ];

             function generateTable(table, data) {
               for (let element of data) {
                 let row = table.insertRow();
                 for (key in element) {
                   let cell = row.insertCell();
                   let text = document.createTextNode(element[key]);
                   cell.appendChild(text);
                 }
               }
             }
             generateTable(table, Table);
Pablo Picasso
  • 133
  • 2
  • 12

1 Answers1

1

Seems like your problem is with let text = document.createTextNode(element[key]);

You need to check if the attribute is a DOM component:

  • if it is an Image DOM element - add it directly
  • if not let text = document.createTextNode(element[key]);

You can see this answer on how to detect DOM elements: https://stackoverflow.com/a/384380/2938073

You can get DOM type by using Element.tagName (see)

Itamar
  • 1,601
  • 1
  • 10
  • 23
  • I can get the images to show up by removing ```let text = document.createTextNode(element[key]);``` and replacing ```cell.appendChild(text)``` with ```cell.innerHTML = element[key].outerHTML;``` but then every other text element is undefined – Pablo Picasso Oct 06 '20 at 22:56