将JSON插入HTML数据属性

Question

我想从一个div中获取数据，并使用data属性将数据插入到新的div中。

//get data from old div as JSON
var data = JSON.parse(document.getElementById('video_data').getAttribute('data-video'));

这是我获取数据的div。

//insert the data to the new div
document.getElementById('i').insertAdjacentHTML('afterbegin', '<div class="video_wrap update" video_name="' + data.video_name + '" data-video="' + JSON.stringify(data) + '"><div class="content"><div class="title_wrap infinite_wrap"><div class="quality uninfinite">∞</div></div><div class="img_wrap"><img src="https://i.ytimg.com/vi/' + data.yt_id + '/hqdefault.jpg"></div><div class="title_wrap"><div class="title">' + data.title + '</div></div></div></div>');

这是插入新div后得到的结果。

你可以看到即使颜色不正确

有什么问题？

Answer 1

Json stringify只是把它变成一个字符串。你需要在结果字符串中转义双引号，以便在渲染时它会很好用

如果您确信数据中没有单引号，我可能还会全局替换“with”吗？

哦，作为事后的想法如果你用JavaScript构建div而你只支持更新的浏览器你应该能够做到

El.dataset.video = your json string

Answer 2

document.getElementById('i').insertAdjacentHTML('afterbegin', '<div class="video_wrap update" video_name="' + data.video_name + '"><div class="content"><div class="title_wrap infinite_wrap"><div class="quality uninfinite">&infin;</div></div><div class="img_wrap"><img src="https://i.ytimg.com/vi/' + data.yt_id + '/hqdefault.jpg"></div><div class="title_wrap"><div class="title">' + data.title + '</div></div></div></div>');
document.getElementById('i').firstChild.setAttribute('data-video', JSON.stringify(data));

这解决了错误。