未捕获（承诺）TypeError：无法在'Node'上执行'appendChild'：参数1不是'Node'类型

Question

首次使用fetch和模板字符串时，我在尝试追加到DOM时遇到了问题。这是给出错误的原因。

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); 
     }
 })

如果我使用jquery，$('#grid').append(markup);它会达到预期的效果，但我宁愿不使用jquery。