在HTML中显示JavaScript对象
我有一个对象，看起来像这样：
var grocery_list = {
"Banana": { category: "produce", price: 5.99 },
"Chocolate": { category: "candy", price: 2.75 },
"Wheat Bread": { category: "grains and breads", price: 2.99 }
}我希望能够在HTML中显示对象中的每个项目，如下所示：
<div id="grocery_item" class="container">
<div class="item">Item Here</div>
<div class="category">Category Here</div>
<div class="price">Price Here</div>
</div>我知道如何在JS中遍历对象，但我不确定如何在DOM中显示这些项。我相信我可以使用jQuery追加函数，但我不确定如何使用。
任何帮助都将不胜感激。谢谢!
回答 4
Stack Overflow用户
发布于 2014-12-03 17:16:33
你可以用jQuery：$('<div>', {attr1: value, attr2: value});来创建jQuery元素，这会返回一个新的jQuery对象，所以你可以像使用jQuery元素一样使用它。
jQuery.text()方法：$('div').text('some text')如果只将文本放入元素中，建议使用此方法。它将转义所有特殊字符，如'<'。取而代之的是<。与jQuery.html()方法不同，这种方法可以避免XSS攻击。您可以在关于.html方法的jQuery docs上查看安全注意事项。
// Create a div element with jQuery which will hold all items.
var $tree = $('<div>', {id: 'items-tree'});
//Loop all items and create elements for each
for (var key in grocery_list) {
var $gItem = $('<div>', {
id: 'grocery_item',
class: 'container'
});
var $item = $('<div>', {
class: 'item'
}).text(key);
$gItem.append($item);
var $category = $('<div>', {
class: 'category'
}).text(grocery_list[key].category);
$gItem.append($category);
var $price = $('<div>', {
class: 'price'
}).text(grocery_list[key].price);
$gItem.append($price);
$tree.append($gItem);
}Stack Overflow用户
发布于 2014-12-03 16:44:33
父div <div id="grocery_item" class="container">将对no重复。购物单上的商品数量。此父目录的"id“将随机生成，例如item @index 0将为"grocery_item0”
对于每个循环项，首先创建父div，然后开始使用(另一个循环)将详细信息附加到父div。下面是示例jquery，
$( ".grocery_item0“).append( "”)；
Stack Overflow用户
发布于 2014-12-03 16:47:56
我将忽略这样一个事实，即你的列表定义并不是最好的，我这样说：
使用jQuery可以做到这一点：
<script>
var _parent = $(".container").parent();
_parent.empty();
var _html;
$.each(grocery_list,function(prop, val){
_html = "<div id=\"grocery_item\" class=\"container\">";
_html += "<div class=\"item\">"+prop+"</div>";
_html += "<div class=\"category\">"+val.category+"</div>";
_html += "<div class=\"price\">"+val.price+"</div>";
_html += "</div>";
_parent.append(_html);
});
</script>注意*：不建议通过创建HTML字符串来操纵DOM。这只是你的学校作业的一个快速样本。
https://stackoverflow.com/questions/27266901
复制相似问题