javascript 使用innerHTML在某个div中显示JSON/对象数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29068054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using innerHTML to display JSON/object data in a certain div
提问by chaser7016
I have created the following JS code. When the HTML document loads, the script displays the three location data sets properly.
我创建了以下 JS 代码。加载 HTML 文档时，脚本会正确显示三个位置数据集。
<html>
<head>
<title>Javascript Beginner</title>
</head>
<body>
<script>
pios ('a', '7886 Dublin Blvd', 'Dublin, ', 'CA ', '94568');
pios ('b', '1 Stoneridge Mall Space', 'Pleasanton, ', 'CA ', '94588');
pios ('c', '1120 Stoneridge Mall Drive', 'Pleasanton, ', 'CA ', '94566');
function pios(iID, Address, City, State, Zip)
{
document.body.innerHTML +='<p id='+iID+'></p>';
document.getElementById(iID).innerHTML = Address + '<br>' + City + State + Zip;
}
</script>
</body>
</html>Now that I got that down I need to understand how I can make this data appear within a specified div, like div id=whatever? Right now it just appears within the body.
现在我明白了，我需要了解如何让这些数据出现在指定的 div 中，比如 div id=whatever？现在它只是出现在体内。
Also, I know this code is rough and thus, wonder what is the best way to write this?
另外，我知道这段代码很粗糙，因此，想知道编写它的最佳方法是什么？
回答by Dhiraj
Update
更新
Storing the pio data in an array and iterating over it would look something like this.
将 pio 数据存储在一个数组中并对其进行迭代将看起来像这样。
var piosData = [{
id: 'a',
address: '7886 Dublin Blvd',
city: 'Dublin, ',
state: 'CA ',
zip: '94568'
}, {
id: 'b',
address: '1 Stoneridge Mall Space',
city: 'Pleasanton, ',
state: 'CA ',
zip: '94568'
}, {
id: 'c',
address: '1120 Stoneridge Mall Drive',
city: 'Pleasanton, ',
state: 'CA ',
zip: '94568'
}];
piosData.forEach(function(pio) {
pios(pio);
});
function pios(pio) {
var div = document.createElement('div');
div.setAttribute('id', pio.id);
div.innerHTML = pio.address + '<br />' + pio.city + pio.state + pio.zip;
document.body.appendChild(div);
}
You can use document.createElementto create a new element of any type and then append it to body using Node.appendChild()
您可以使用document.createElement创建任何类型的新元素，然后使用Node.appendChild()
function pios(iID, Address, City, State, Zip)
{
var div = document.createElement('div');
div.setAttribute('id', iID);
div.innerHTML = Address + '<br />' + City + State + Zip;
document.body.appendChild(div);
}
var piosData = [{
id: 'a',
address: '7886 Dublin Blvd',
city: 'Dublin, ',
state: 'CA ',
zip: '94568'
}, {
id: 'b',
address: '1 Stoneridge Mall Space',
city: 'Pleasanton, ',
state: 'CA ',
zip: '94568'
}, {
id: 'c',
address: '1120 Stoneridge Mall Drive',
city: 'Pleasanton, ',
state: 'CA ',
zip: '94568'
}];
piosData.forEach(function(pio) {
pios(pio);
});
function pios(pio) {
var div = document.createElement('div');
div.setAttribute('id', pio.id);
div.innerHTML = pio.address + '<br />' + pio.city + pio.state + pio.zip;
document.body.appendChild(div);
}回答by Arun P Johny
You can create a pelement and use appendChild() to add it as a descendant of a div like
您可以创建一个p元素并使用 appendChild() 将其添加为 div 的后代，例如
pios('a', '7886 Dublin Blvd', 'Dublin, ', 'CA ', '94568');
pios('b', '1 Stoneridge Mall Space', 'Pleasanton, ', 'CA ', '94588');
pios('c', '1120 Stoneridge Mall Drive', 'Pleasanton, ', 'CA ', '94566');
function pios(iID, Address, City, State, Zip) {
var p = document.createElement('p');
p.id = iID;
p.innerHTML = Address + '<br>' + City + State + Zip;
document.getElementById('whatever').appendChild(p)
}
Demo: Fiddle
演示：小提琴
