html data attribute not showing as expected when using javascript in firefox but correctly in chrome

Question

I would expect the following code:

var data = "data-detail='{" + "'id': '1', 'name': 'iPad 2', 'price': '599.00', 'quantity': '5', 'photo': 'somepath/anotherpath/photo.jpg', 'description': 'A white iPad 2'" + "}'";
string += "<section class='homeItem' " + data + "><div class='imageContainer'><img class='resultsImage' src='" + results[i].Photo + "'></div><p class='resultsName'>" + results[i].Name + "</p><p class='resultsPrice'>£" + price.toFixed(2) + "</p></section>";

to display in the inspector like this:

<section class="homeItem" data-detail="{" id':="" '1',="" 'name':="" 'ipad="" 2',="" 'price':="" '599.00',="" 'quantity':="" '5',="" 'photo':="" 'somepath="" anotherpath="" photo.jpg',="" 'description':="" 'a="" white="" ipad="" 2'}'=""><div class="imageContainer"><img class="resultsImage" src="Images/Products/macbookAir.png"></div><p class="resultsName">MacBook Air</p><p class="resultsPrice">£899.00</p></section>

Which in chrome it does. But in FireFox it displays like this:

<section class="homeItem" 2'}'="" ipad="" white="" 'a="" 'description':="" photo.jpg',="" anotherpath="" 'somepath="" 'photo':="" '5',="" 'quantity':="" '599.00',="" 'price':="" 2',="" 'ipad="" 'name':="" '1',="" id':="" data-detail="{"></section>

Could anyone explain why this is, and if it would work in the same way with either representation

[How do I escape quotes in HTML attribute values?](https://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values) — Alexander O'Mara, Feb 15 '15 at 21:00

score 0 · Accepted Answer · answered Mar 20 '15 at 17:30

I have fixed this issue by using the following code:

var sec = document.createElement("section");
sec.classList.add("homeItem");
sec.dataset.detail = "{'id': '1', 'name': 'iPad 2', 'price': '599.00', 'quantity': '5', 'photo': 'somepath/anotherpath/photo.jpg', 'description': 'A white iPad 2'}";
article.appendChild(sec);

html data attribute not showing as expected when using javascript in firefox but correctly in chrome

1 Answers1