javascript - 将 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 只是将其转换为字符串。您需要转义结果字符串中的双引号，以便渲染时效果良好

如果您确信数据中没有单引号，我也可以将“全局替换为'？

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

El.dataset.video = your json string