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

Question

我希望得到以下代码：

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

在检查器中显示如下：

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

在 chrome 中确实如此。但在 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>

任何人都可以解释为什么会这样，以及它是否会以相同的方式与任何一种表示一起工作

Answer 1

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

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 在 firefox 中使用 javascript 但在 chrome 中正确显示时，数据属性未按预期显示

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

html

javascript

firefox

google-chrome