2021-02-08 DocumentFragment Practice

by Ttt Yyy

HTML

<div id="container">
  <div class="row">
    <img src="https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/pikachu.png">
    <span>pikachu</span>
  </div>
</div>

CSS

#container {
  display: flex;
  flex-direction: column;
}

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

JavaScript

const container = document.getElementById('container')
const fragment = document.createDocumentFragment();
const pokemonList = ['bulbasaur', 'charmander', 'squirtle'];

pokemonList.forEach(pokemon => {
	const row = document.createElement('div');
  row.className = 'row';
  row.innerHTML = `<img src="https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${pokemon}.png"><span>${pokemon}</span>`
	fragment.appendChild(row);
})

container.appendChild(fragment);