A problem with dynamically created image

Question

Hi, I have problem with dynamically created image (JavaScript). I want to change the innerHTML property of a table cell:

   var x=document.getElementById('myTable').rows;
   var y=x[0].cells;

   var myImg = document.createElement('img');
   myImg .setAttribute("alt","");
   myImg .setAttribute("style","vertical-align: middle; visibility:visible");
   myImg .setAttribute("src", "http://valid_link/ajax-loader.gif");

   y[0].innerHTML = myImg ;

but, as the result I see "[object HTMLImageElement]". How to show that picture ?

Answer 1

myImg is an object, not an HTML string. What if you try y[0].appendChild(myImg) instead?

Answer 2

innerHTML allows you to set the HTML content of a node. However, you are setting it with an element object rather than a string containing HTML. The object gets converted to a string, which is why you see [object HTMLImageElement] instead of the image.

To add an element object into page, you an use appendChild. The following example clears the cell and then appends the image element:

y[0].innerHTML = '';
y[0].appendChild(myImg);