How do you insert images into table using Javascript? [duplicate]

Question

I would like to insert images to "choicesDiv". How can I do so without editing HTML & CSS? Table code below:

<table id="choices">
  <tr>
    <td><div class="choicesDiv" value="1"></div></td>
    <td><div class="choicesDiv" value="2"></div></td>
    <td><div class="choicesDiv" value="3"></div></td>
    <td><div class="choicesDiv" value="4"></div></td>
    <td><div class="choicesDiv" value="5"></div></td>
  </tr>
  <tr>
    <td><div class="choicesDiv" value="6"></div></td>
    <td><div class="choicesDiv" value="7"></div></td>
    <td><div class="choicesDiv" value="8"></div></td>
    <td><div class="choicesDiv" value="9"></div></td>
    <td><div class="choicesDiv" value="10"></div></td>
  </tr>
</table>

jQuery: api.jquery.com/append, plain JS: developer.mozilla.org/en-US/docs/Web/API/Node/appendChild — Rory McCrossan
– Rory McCrossan, Commented Feb 19, 2020 at 12:17
What have you tried so far? You need to post that code as well. — besciualex
– besciualex, Commented Feb 19, 2020 at 12:26

Harshsetia · Accepted Answer · 2020-02-19 12:22:53Z

-2

$(document).ready(function(){
  $(".choicesDiv").append("<img src='your-image-src'/>" )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="choices">
  <tr>
    <td><div class="choicesDiv" value="1"></div></td>
    <td><div class="choicesDiv" value="2"></div></td>
    <td><div class="choicesDiv" value="3"></div></td>
    <td><div class="choicesDiv" value="4"></div></td>
    <td><div class="choicesDiv" value="5"></div></td>
  </tr>
  <tr>
    <td><div class="choicesDiv" value="6"></div></td>
    <td><div class="choicesDiv" value="7"></div></td>
    <td><div class="choicesDiv" value="8"></div></td>
    <td><div class="choicesDiv" value="9"></div></td>
    <td><div class="choicesDiv" value="10"></div></td>
  </tr>
</table>

answered Feb 19, 2020 at 12:22

Harshsetia

2652 silver badges6 bronze badges

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

2 Comments

BeginnerMe Over a year ago

That works! Any idea how I can implement the "random" codes? I would like to have 10 different images in the choicesDiv & the images change it place whenever the page refresh,

Harshsetia Over a year ago

You can change with each function , Put your images in each function and implement in shared code.(if you satisfy with my answer my vote me)

Collectives™ on Stack Overflow

How do you insert images into table using Javascript? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related