JSON in HTML-Datenattribut einfügen

Question

Ich möchte Daten von einem Div abrufen und die Daten in ein neues Div mit dem Attribut data einfügen.

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

Dies ist das Div von wo ich Daten bekomme.

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

Dies ist, was ich nach dem neuen div einlegen.

Sie können sehen, dass auch die Farbe

nicht korrekt ist, was das Problem ist?

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

Dieser den Fehler behoben.

Answer 2

Json stringify verwandelt es einfach in eine Zeichenfolge. Sie müssen die doppelten Anführungszeichen im String zu entkommen, so dass es schön spielen wird, wenn

gemacht

Ich könnte wahrscheinlich global ersetzen auch die "mit", wenn Sie sicher sind, gibt es keine einfachen Anführungszeichen in Ihnen Daten ist?

Oh wie ein nachträglicher Einfall Wenn Sie die div in JavaScript erstellen und Sie nur neuere Browser unterstützen sollten Sie tun

El.dataset.video = your json string 

Lage sein