使用innerHTML在某个div中显示JSON/object数据

Question

我创建了以下 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>

现在我明白了，我需要了解如何让这些数据出现在指定的 div 中，比如 div id=whatever？现在它只是出现在体内。

此外，我知道这段代码很粗糙，因此想知道编写这段代码的最佳方式是什么？

Answer 1

更新

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

您可以使用document.createElement to create a new element of any type and then append it to body using 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);
}

Answer 2

您可以创建一个 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)
}

演示：Fiddle

使用innerHTML在某个div中显示JSON/object数据

Using innerHTML to display JSON/object data in a certain div

javascript

innerhtml

更新