Insert image into table cell in Javascript

Question

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 put some text in you td using innerHTML but you can't put there an img tag? — Teemu
– Teemu, Commented Jun 7, 2013 at 7:17
I don't quite understand, what's the difference if you wrote "<img src='myImageURL' />" instead of "New cell"? — Teemu
– Teemu, Commented Jun 7, 2013 at 10:38

MrCode · Accepted Answer · 2013-06-07 07:21:01Z

23

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.

answered Jun 7, 2013 at 7:21

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brntsllvn Over a year ago

This tool might be useful for escaping html attributes: accessify.com/tools-and-wizards/developer-tools/quick-escape/…

p e p · Accepted Answer · 2013-06-07 07:20:37Z

8

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'/>";
}

answered Jun 7, 2013 at 7:20

p e p

6,6742 gold badges25 silver badges33 bronze badges

1 Comment

LaurelS Over a year ago

Hey this worked for me! I like the minimal number of lines too.

user2412575 · Accepted Answer · 2013-06-07 07:20:35Z

-1

 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?

answered Jun 7, 2013 at 7:20

user2412575

1 Comment

LaurelS Over a year ago

This displays the name of the image file. It does not put the actual image out there.

Collectives™ on Stack Overflow

Insert image into table cell in Javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related