在firefox中使用javascript时，html数据属性未按预期显示，但在chrome中显示正确

我希望得到以下代码：

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

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

要在检查器中显示如下内容：

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

这是用铬做的。但在FireFox中，它显示如下：

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

---

有谁能解释一下为什么会这样，以及它是否会以同样的方式与任何一种表示法一起工作

我已经通过使用以下代码解决了这个问题：

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

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

---

对属性中的引号进行编码或使用setAttribute。这是什么意思？