Вставить атрибут данных JSON в HTML

Question

Я хочу получить данные из одного div и вставить данные в новый div, используя атрибут data.

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

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)); 

Это исправлена ​​ошибка.

Answer 2

Json stringify просто превращает его в строку. Вам нужно бежать двойные кавычки в результирующей строке так, что она будет играть хорошо, когда оказывается

Я мог бы, вероятно, также глобально заменить "с", если вы уверены, что нет ни одного одинарных в вас данные?

о машинально Если вы строите DIV в JavaScript, и вы только поддержка новых браузеров, вы должны быть в состоянии сделать

El.dataset.video = your json string