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?

回答1:

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

回答2:

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