Appendchild image to top of table

Question

I'm trying to use appendchild to make a button that displays a random image from an array into a table, and will continue to display a new image on each click, but I need the newest image to stick to the top of the column, not the bottom. I tried to do this below but it appears to be an error.

function display_random_image1() {
  var theImages = [{
      src: "https://i.imgur.com/Ej3qKfd.png",
      width: "120",
      height: "120"
    },
    {
      src: "https://i.imgur.com/P1i0O2m.png",
      width: "120",
      height: "120"
    },
    {
      src: "https://i.imgur.com/FRaU0bc.png",
      width: "120",
      height: "120"
    }
  ];

  var preBuffer = [];
  for (var i = 0, j = theImages.length; i < j; i++) {
    preBuffer[i] = new Image();
    preBuffer[i].src = theImages[i].src;
    preBuffer[i].width = theImages[i].width;
    preBuffer[i].height = theImages[i].height;
  }

  // create random image number
  function getRandomInt(min, max) {
    //  return Math.floor(Math.random() * (max - min + 1)) + min;

    imn = Math.floor(Math.random() * (max - min + 1)) + min;
    return preBuffer[imn];
  }

  // 0 is first image,   preBuffer.length - 1) is  last image

  var newImage = getRandomInt(0, preBuffer.length - 1);


  // display the image  
  var targetContainer = document.getElementsByClassName("container");
  targetContainer[0].appendChild(newImage);
  targetContainer.insertBefore(newImage, targetContainer.childNodes[0]);
}

th,
td {
  border: 1px solid black;
  width: 100px
}

<table>
  <tr>
    <td>
      <button id="initial" onclick="display_random_image1();">Beginning R</button>
    </td>
  </tr>
  <tr>
    <td>
      <div class="container">
  </tr>
</table>

https://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript[enter link description here](https://stackoverflow.com/questions/3391576/how-can-i-implement-prepend-and-append-with-regular-javascript) — Neha Sharma, Feb 09 '20 at 06:36

thanhdx · Answer 1 · 2020-02-09T06:34:42.870

3

If you want the new image to stick at the top, use ParentNode.prepend() instead.

...
// display the image  
  var targetContainer = document.getElementsByClassName("container");
  // targetContainer[0].appendChild(newImage);
  // targetContainer.insertBefore(newImage, targetContainer.childNodes[0]);
  targetContainer[0].prepend(newImage);

edited Feb 09 '20 at 06:34

answered Feb 09 '20 at 06:27

thanhdx

608
4
16

Gangadhar Gandi · Accepted Answer · 2020-02-09T06:52:02.793

Change your insertBefore statement like below,

targetContainer[0].insertBefore(newImage, targetContainer[0].firstChild);

Check the below running code,

function display_random_image1() {
 var theImages = [{
   src: "https://i.imgur.com/Ej3qKfd.png",
   width: "120",
   height: "120"
  },
  {
   src: "https://i.imgur.com/P1i0O2m.png",
   width: "120",
   height: "120"
  },
  {
   src: "https://i.imgur.com/FRaU0bc.png",
   width: "120",
   height: "120"
  }
 ];

 var preBuffer = [];
 for (var i = 0, j = theImages.length; i < j; i++) {
  preBuffer[i] = new Image();
  preBuffer[i].src = theImages[i].src;
  preBuffer[i].width = theImages[i].width;
  preBuffer[i].height = theImages[i].height;
 }

 function getRandomInt(min, max) { // create random image number
  imn = Math.floor(Math.random() * (max - min + 1)) + min;
  return preBuffer[imn];
 }

 var newImage = getRandomInt(0, preBuffer.length - 1); // 0 is first image,   preBuffer.length - 1) is  last image

 var targetContainer = document.getElementsByClassName("container"); // display the image  
 targetContainer[0].insertBefore(newImage, targetContainer[0].firstChild);
}

th, td { border: 1px solid black; width: 100px }

<table>
   <tr>
      <td>
         <button id="initial" onclick="display_random_image1();">Beginning R</button>
      </td>
   </tr>
   <tr>
      <td>
         <div class="container">
   </tr>
</table>

Appendchild image to top of table

2 Answers2