JSFiddle - React, Tailwind, and code Playground

Infinite scroll list

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<head/> 
<body>
  <div class='container' />
</body>

CSS

.row {
  display: flex;
  align-items: center;
}

.rowImage {
  height: 50px;
  width: 50px;
  /* float: left; */
}

.label {
  margin-left: 10px;
  /* line-height: 50px; */
}

JavaScript

let container = document.getElementsByClassName('container')[0]

const addRow = (url, label, index, container) => {
	
  let row = document.createElement('div');
  row.className = 'row';
  

  row.innerHTML = `<img class='rowImage' src=${url} /><span class='label'> ${label} </span>`
  
  
  let children = container.childNodes;
  if(index < children.length) {
  	container.insertBefore(row, children[index])
  } else {
  container.appendChild(row);
  }
  
}


addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/moltres.png', 'Moltres', 0, container)

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/zapdos.png', 'Zapdos', 0, container)

addRow('https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/articuno.png', 'Articuno', 1, container)