0

First time using fetch and template strings and I've ran into an issue when trying to append to the DOM. Here is what is giving the error.

fetch(url)
.then(function(res){
     return res.json()
 })
 .then(function(data){
     for(var i = 0; i < data.length; i++){
         var name = data[i].name;
         var price = data[i].price;
         var dayChange = data[i].percent_change_24h;
         var weekChange = data[i].percent_change_7d;

         var markup = `
          <div class="coin-info">
            <div class="coin">
              <p>${name}</p>
            </div>
            <div class="price">
              <p>${price}</p>
            </div>
            <div class="changes">
              <p>24h change:</p>
              ${dayChange}
              <p>7 day change:</p>
              ${weekChange}
            </div>
          </div>
    `;

     var grid = document.getElementById('grid');
     grid.appendChild(markup); 
     }
 })

If I use jquery, $('#grid').append(markup); it achieves the desired effect but I'd rather not use jquery just for that.

charliework
  • 59
  • 5
  • Try to append $(markup): grid.appendChild($(markup)); – Serge Jan 19 '18 at 12:43
  • Thanks but I am trying to avoid jquery for this. The linked thread had the answer. Using grid.insertAdjacentHTML('beforeend', markup); Using this worked. – charliework Jan 19 '18 at 13:00
  • Oh, sorry. Then something like: var el = document.createElement('div'); el.innerHTML = markup; grid.appendChild(el); – Serge Jan 19 '18 at 13:19

0 Answers0