从Json响应中呈现HTML标签到模板字面量

Question

我在JSON响应中使用HTML标签从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)

预期的结果:

<东西strong>关键字

但它不起作用。JSON值呈现为不带标记的纯文本，如下所示:

请帮我渲染json值与HTML标签?

Answer 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 />