Fetch API Example

by frontendmonster

HTML

<button id="button">Fetch</button>
<button id="clear">clear</button>
<ul id="container">
  
</ul>

JavaScript

button.addEventListener('click', xhr);

clear.addEventListener('click', () => {
	container.innerHTML = '';
})

function xhr() {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => {
      data.forEach(post => {
      	const li = document.createElement('li');
        li.innerText = post.title;
        container.appendChild(li);
      })
    })
}