程序员经验分享-hwhale

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

2024-03-14

我创建了以下 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？现在它只是出现在体内。

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


Update

将 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 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement创建任何类型的新元素，然后使用将其附加到主体Node.appendChild() https://developer.mozilla.org/en-US/docs/Web/API/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);
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

innerHTML

使用innerHTML在某个div中显示JSON/对象数据 的相关文章

随机推荐

热门标签