Nest Elements With Javascript

Create a basic nested hierarchy with javascript

by LouKaz

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/Blasters.css">
    </head>
    <body>
        
        
        <script src="js/Blasters.js" async></script>
    </body>
</html>

CSS

body{
  margin: 0;
}
.container{
  border: 1px solid red;
  margin: 2px;
  padding: 2px;
}
.nested{
  border: 2px solid green;
  margin: 2px;
  padding: 2px;
}
h2{
  border: 1px solid blue;
  padding: 2px;
}

JavaScript

const blastersAry = [];
const test = ["nameEl", "typeEl", "magSizeEl", "dartTypeEl", "powerEl", "accuracyEl", "nullShotEl"];


class Blaster {
    constructor(name, type, magSize, dartType, power, accuracy, nullShot, classID) {
        this.name = name;
        this.type = type;
        this.magSize = magSize;
        this.dartType = dartType;
        this.power = power;
        this.accuracy = accuracy;
        this.nullShot = nullShot;
        this.classID = classID
    }
}

let nexus = new Blaster("Nexus Pro", "Rifle", 12, "Short", 7 + "/10", 8 + "/10", 30 + "%", "nexus");
let prime = new Blaster("GF Prime", "Rifle", 15, "Short", 8 + "/10", 9 + "/10", 20 + "%", "prime");
let mkII = new Blaster("DZ Pro Mk II", "Pistol", 6, "Short", 8 + "/10", 8 + "/10", 40 + "/10", "mkII");
let kronos = new Blaster("Rival Kronos", "Pistol", 5, "Ball", 6 + "/10", 9 + "/10", 2 + "%", "kronos");

blastersAry.push(nexus, prime, mkII, kronos);


function createHtml(){
    let newDiv = document.createElement('div');
    newDiv.classList.add("container");
    document.body.prepend(newDiv);
    let container = document.querySelector('.container');

    let innerDiv = document.createElement('div');
    innerDiv.classList.add("nested");
    container.append(innerDiv);
    let nested = document.querySelector(".nested");

    for(i=0;i<7;i++){
        let h2s = document.createElement('h2');
        h2s.classList.add(test[i]);
        nested.append(h2s);
    }
    let categories = document.querySelectorAll("h2");

}
/* createHtml(); */

blastersAry.forEach(createHtml);