How can I get 2 images side-by-side in table

Question

Why do I not get 2 images next to each other in my table row using the code below? You can copy/paste to JSFiddle

  var existingbody = document.getElementById('PulseBody');
     var newBody = document.createElement('tbody');
     var row = document.createElement('tr');

     var greenLight = document.createElement("img");
     greenLight.src = "http://placehold.it/50x50";
     greenLight.style.height = "30px";
     greenLight.style.width = "30px";

     var cellImg = document.createElement('td');
     cellImg.appendChild(greenLight);
     row.appendChild(cellImg);  

     var cellImg2 = document.createElement('td');
     cellImg2.appendChild(greenLight);
     row.appendChild(cellImg2);

     newBody.appendChild(row);

     existingbody.innerHTML = newBody.innerHTML;

<div class="container-fluid" style="padding: 0px;height:100%">
  <span id="PulseTableDT" style="padding-top:5px;font-size:10px">Incitialising...</span>
  <table id="PulseTable" class="display2" style="height:100%">
    <tbody id="PulseBody" style="height:100%">
      <tbody>
  </table>
</div>

Could people who downvote give a reason - so I know what to change — ManInMoon, Nov 21 '17 at 16:47
"_You can copy/paste to JSFiddle_" So can you - and since you are the one asking for help you should take the time to do that. Help us help you. I'm not downvoting you for that though. — takendarkk, Nov 21 '17 at 16:47
You only create one image element so the last append cancels the first one. — Capsule, Nov 22 '17 at 02:03

Canet Robern · Accepted Answer · 2017-11-22T02:07:36.683

1

It seems like a kind of weird action.

I think 'img' element made of 'createElement' used only one time.

If you want a solution, how about using this.

Clone Node

var cellImg = document.createElement('td');
cellImg.appendChild(greenLight.cloneNode(true));   // used 'cloneNode' function
row.appendChild(cellImg);

This might be able to solve this problem.

UPDATE

And I've got a link to explain this.

I hope this can help you. :)

https://stackoverflow.com/a/6245051/8481089

edited Nov 22 '17 at 02:07

answered Nov 22 '17 at 01:57

Canet Robern

1,049
2
11
28

Yes. I had come to a similar conclusion. cloneNode() doesn't work for me,. However, if I create another element, then I get the two side-by-side. Your reference to the explanatory article was very helpful. Thank you. – ManInMoon Nov 22 '17 at 08:55
@ManInMoon I'm sorry for 'cloneNode()' did not work. But it's my pleasure I could help you. :) – Canet Robern Nov 23 '17 at 00:07

How can I get 2 images side-by-side in table

1 Answers1