Question

我创建了以下JS代码。加载HTML文档时，脚本会正确显示三个位置数据集。

＆＃13;

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

＆＃13;

现在我明白了，我需要了解如何让这些数据出现在指定的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创建任何类型的新元素，然后使用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);   
}

＆＃13;

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

＆＃13;

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 /对象数据

2 个答案:

更新