JSFiddle - React, Tailwind, and code Playground

by darul75

HTML

<div id="planets"></div>

JavaScript

var planets = [
  {name: 'mercure', radius: 2440},
  {name: 'venus', radius: 6052},
  {name: 'earth', radius: 6378},
  {name: 'mars', radius: 3397},
  {name: 'jupiter', radius: 71492},
  {name: 'saturn', radius: 58232},
  {name: 'uranus', radius: 25362},
  {name: 'neptune', radius: 24622 }
];

var div = document.createElement('div');
for (var i = 0; i < planets.length; i++) {
  // extract props
  var name = planets[i].name.replace(/(?:^|\s)\S/g, function(a) {
    return a.toUpperCase();
  });
  var radius = planets[i].radius;

  // create html paragraph
  var p = document.createElement('p');
  p.innerHTML = name + ' radius is: ' + radius;
  // append it to div element
  div.appendChild(p);
}
console.log(div);
document.getElementById("planets").appendChild(div);