将来自 Json 响应的 HTML 标记渲染到模板文字

Posted 2023-03-08

【中文标题】将来自 Json 响应的 HTML 标记渲染到模板文字

【英文标题】：Render HTML tag from Json response to template literals

【发布时间】：2021-10-10 11:59:49

【问题描述】：

我在 JSON 响应中使用带有 html 标记的 Fetch 从 API 获取数据，但是在我使用模板文字在页面上呈现它之后，标记被删除并且响应以纯文本显示。

来自 API 的 JSON 示例：

"value" : 
        "key":"something < strong >keyword < /strong >"
      

这是我的获取请求和渲染：

fetch('www.someurltogetdata').then(response =>    if (! response.ok) 
 var counter = '< div>< h3 >Something went wrong, please try again</h3></div>';
 throw Error("Error")        
 return response.json();     ).then(data => 
    var html = data.value.map(data => 
    return `< div class="result">
    <a href=$data.url>$data.content</a></div >`
    ).join('')

//渲染HTML

document.querySelector('.someclass').insertAdjacentHTML('afterbegin', html)

想要的结果：

某事关键字

但它不起作用。 JSON 值呈现为没有标记的纯文本，如下所示：something 关键字

请帮我用 HTML 标签渲染 json 值？

【参考方案1】：

使用createRange 和createContextualFragment 创建一个新的文档片段，然后将其附加到现有元素。

const value = 
  key: 'something <strong>keyword</strong>'
;

let range = document.createRange()
const frag = range.createContextualFragment(value.key);

const div = document.querySelector('div');

div.appendChild(frag);

<div />

【讨论】：

谢谢你，安迪！但是我遇到了一个问题——我从 API 中获得了数百个结果，并使用模板文字循环了一个 div。我创建了“范围”和“片段”，但不知道如何循环遍历我的 div。我当前的设置： $value.key //这将在每个 div 中使用 API 的结果动态创建 100 多个 div 现在，我已经创建了 frag 但如何用 frag 替换 $value.key ？当我尝试时，我得到 - [object DocumentFragment] 而不是实际内容。