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

I have created the following JS code. When the HTML document loads, the script displays the three location data sets properly.

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

Also, I know this code is rough and thus, wonder what is the best way to write this?

Update

Storing the pio data in an array and iterating over it would look something like this.

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

You can create a p element and use appendChild() to add it as a descendant of a div like

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

来源：https://stackoverflow.com/questions/29068054/using-innerhtml-to-display-json-object-data-in-a-certain-div

标签

javascript

innerhtml