Insert image into table cell in Javascript

I want to insert images to the new cell just created. How can I do it? Can anyone guide me in doing it? Here's my code to insertcells:

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>

<table id="myTable" border="1">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>

</body>
</html>

All I want is to insert image in the cell created.

You can create the image element and append it to the new cell:

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="New cell";

    var img = document.createElement('img');
    img.src = "link to image here";
    x.appendChild(img);
}

Beware of building the raw HTML for the image, if you do it that way you'll need to make sure that you escape the src and any other attributes.

Simply set the inner HTML of the new cell to the HTML of an img element, with whatever src or attributes you wish.

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="<img src='myImageURL' alt='hello'/>";
}

 function displayResult()
    {
   document.getElementById("myTable").rows[0].innerHTML="your image";
    }

may be this can help,dynamicism can be achieved later on,just try if it works for now?

来源：https://stackoverflow.com/questions/16978296/insert-image-into-table-cell-in-javascript

标签

javascript

html

image

html-table

cell