Practice DOM APIs

by jacobwsmith

HTML

<div id="container" style="border: green solid 5px">
</div>

<ul class="status-list">
  <li>success</li>
  <li>fail</li>
</ul>

JavaScript

// Practice DOM APIs: createElement, append, query, etc.
const container = document.getElementById('container');
container.innerHTML = '';
const list = [1, 2, 3, 4];
const fragment = document.createDocumentFragment();
list.forEach(item => {
  const div = document.createElement('div');
  div.style.color = 'blue';
  div.style.border = 'solid 1px red';
  div.textContent = item;
  fragment.appendChild(div);
})
container.appendChild(fragment);

const statusList = document.getElementsByClassName('status-list');
if (statusList.length > 0) {
    const children = statusList[0].children;
    for (const child of children) {
        console.log(child.textContent);
        if(child.textContent === "fail"){
          child.style = "color: red"
          child.append(' - doh');
        } else {
          child.style = "color: green"
          child.append(' - yay');
        }
    }
}