VanillaJS中如何将fetch请求返回的HTML字符串转换为合法DOM结构？

问题根因 #

• 接口返回的是经过JSON序列化的HTML字符串，并非原生HTML文本：你拿到的响应外层的双引号、属性前的反斜杠都是JSON序列化的转义标记，jQuery的$.ajax会自动根据响应头Content-Type完成JSON解析，你当前使用fetch时没有执行解析步骤，直接当作纯文本处理才会残留转义符。
• 代码存在拼写错误：innerHtml的大小写错误，正确属性名为innerHTML；另外此处不需要额外调用DOMParser做转换，属于多余操作。

修复代码 #

标准方案（和jQuery行为对齐，自动识别JSON响应） #

fetch(url, {
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})
.then(response => response.json())
.then(htmlStr => {
    document.getElementById('table-section').innerHTML = htmlStr;
})
.catch(err => console.error('请求失败', err))

兼容方案（接口未返回正确JSON响应头时使用） #

如果你的接口没有返回application/json类型的响应头，无法直接用response.json()解析，可以手动处理文本内容：

fetch(url, {
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})
.then(response => response.text())
.then(data => {
    // 手动解析序列化后的字符串得到原生HTML
    const htmlStr = JSON.parse(data);
    document.getElementById('table-section').innerHTML = htmlStr;
})

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