使用fetch与模板字符串向DOM追加内容时遇TypeError报错求助

嘿，这个坑我当初刚上手原生DOM操作时也踩过！咱们先把问题根源掰扯清楚：

你用模板字符串生成的markup是普通字符串，但原生DOM的appendChild()方法只认Node对象（也就是真实存在的DOM元素节点）。而jQuery的append()之所以能直接用字符串，是因为它内部偷偷帮你把字符串转换成了DOM节点——原生JS可没这么贴心，得咱们自己动手处理这一步。

下面给你两种靠谱的解决方案，按需选就行：

方案1：直接使用innerHTML（最简单高效） #

如果你的内容是可信的（比如像这里一样是接口返回的可控数据），直接用innerHTML拼接字符串是最快的办法。顺便提个小优化：把DOM元素的获取移到循环外面，避免重复查询DOM浪费性能，而且最好把所有内容先拼接成一个字符串再一次性插入，比循环里多次插入性能更好：

fetch(url)
 .then(function(res){ return res.json() })
 .then(function(data){
   const grid = document.getElementById('grid'); // 只查询一次DOM，移到循环外
   let html = '';
   for(let i = 0; i < data.length; i++){
     // 用解构赋值简化变量声明
     const { name, price, percent_change_24h: dayChange, percent_change_7d: weekChange } = data[i];
     html += `
       <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>
     `;
   }
   grid.innerHTML += html; // 一次性插入所有生成的内容
 })

方案2：把字符串转换成DOM节点再追加（更安全） #

如果要处理用户输入这类不可信内容，或者需要后续对生成的DOM元素做操作，建议先把字符串转换成真实的DOM节点：

fetch(url)
 .then(function(res){ return res.json() })
 .then(function(data){
   const grid = document.getElementById('grid');
   for(let i = 0; i < data.length; i++){
     const name = data[i].name;
     const price = data[i].price;
     const dayChange = data[i].percent_change_24h;
     const weekChange = data[i].percent_change_7d;
     const 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>
     `;
     // 创建临时容器解析字符串为DOM节点
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = markup.trim(); // 去除多余空白字符
     const coinElement = tempContainer.firstElementChild; // 取出目标元素
     grid.appendChild(coinElement); // 现在传入的是Node对象，不会报错了
   }
 })

为啥jQuery能直接用字符串？ #

说白了就是jQuery的append()方法做了兼容处理：当你传入字符串时，它会自动执行类似上面方案2的逻辑，把字符串转换成DOM节点后再追加到目标元素里。既然咱们想用原生JS实现，就得自己补上这一步~

内容的提问来源于stack exchange，提问作者charliework