Untitled

<!DOCTYPE html>
<html>
<head>
<style>
.box
{
width: 300px;
margin-left: 10px;
float: left;
background-color:blue;
color: white;
}
</style>
<script>
function addElement () {


  var cars = ["InneKravallen", "SunTrip", "Valla Pyjamas Rave"];
  var hosts = ["CM", "SM", "Valla Skivgarde"];
  var datum = ["23 Januari", "5 Maj", "27 Mars"];
  var plats = ["Kårallen", "Skytte C", "KK"];

  for(var i = 0; i <cars.length; i++)
  {
  	var box = document.createElement("div");
    box.setAttribute("class", "box");

	//Rubrik
	var rubrik = document.createElement("H1");
    var rubriken = document.createTextNode(cars[i]);
	rubrik.appendChild(rubriken);
    box.appendChild(rubrik);

    //Underrubik
    var underrubrik = document.createElement("H2");
    var underrubriken = document.createTextNode(hosts[i]);
	underrubrik.appendChild(underrubriken);
    box.appendChild(underrubrik);

    //Datum
    var datum = document.createElement("P");
    var datumet = document.createTextNode(datum[i]);
	datum.appendChild(datumet);
    box.appendChild(datum);

    //Plats
    var plats = document.createElement("P");
    var platsen = document.createTextNode(String(plats[i]));
	plats.appendChild(platsen);
    box.appendChild(plats);

	//Printa till skärmen
  	document.body.appendChild(box);
  }
}


</script>
  <title>||Working with elements||</title>
</head>
<body onload="addElement()">
<div id="div1">Boxarna genereras automatiskt</div>
</body>
</html>