2021-10-14 Infinite Scroll

by Ttt Yyy

HTML

<div id='container'>
  <div class="list-item">
    <img class="list-item__image" src="https://" />
    <span class="list-item__label">Label</span>
  </div>
</div>

CSS

.list-item {
  align-items: center;
  display: flex;
}

.list-item__image {
  height: 50px;
  width: 50px;
}

.list-item__label {
  margin-left: 12px;
}

JavaScript

const container = document.getElementById("container");
const addRow = (url, label, index, container) => {
  const row = document.createElement("div");
  row.className = 'list-item'
  // method 1: innerHTML method; should theoretically be faster
  // row.innerHTML = `<img src=${url} class='list-item__image'><span class="list-item__label">${label}</span>`;

  // method 2: structured but slower?
  const imageElement = document.createElement('img');
  imageElement.src = url;
  imageElement.className = 'list-item__image';

  const labelElement = document.createElement('span');
  labelElement.className= 'list-item__label'
  const labelTextNode = document.createTextNode(label)
  labelElement.appendChild(labelTextNode)

  row.appendChild(imageElement);
  row.appendChild(labelElement)

  const 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
);