2021-10-20 Infinite Scroll Part 1

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 addRow = (url, label) => {
  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
);