DocFrag DOM Elements

trying to create DOM elements using DocumentFragment.

by LouKaz

HTML

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="css/Blasters.css">
    </head>
    <body>
        
        
        <script src="js/Blasters.js" async></script>
    </body>
</html>

JavaScript

const blastersAry = [];

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 buildElements() {
  let fragment = new DocumentFragment();

  blastersAry.forEach(function(blaster) { // create container divs 
    let newDiv = document.createElement('div');
    newDiv.classList.add(blaster.classID); // add class name to divs
    fragment.appendChild(newDiv); // add divs to fragment
  });

  document.body.appendChild(fragment); // add fragment to document
/* 
  for (i = 0; i < blastersAry.length; i++) {
    let containers = document.querySelectorAll(".container");
    containers[i].classList.add(blastersAry[i].classID); // adds "classID" string as a class for specificity 
  } */

  let nexusDiv = document.querySelector('.nexus');
  let primeDiv = document.querySelector('.prime');
  let mkIIDiv = document.querySelector('.mkII');
  let kronosDiv = document.querySelector('.kronos');

}
buildElements();