Using JavaScript functions to add dynamic HTML content

Question

I am trying to display vehicle data from a constructor dynamically on an HTML page as individual cards (Each card will include an image, a make, a model, a colour, registration number and price). I would like to be able to manipulate each data point individually. For example, setting the font size of the make to be bigger than, say, the price.

I understand conceptually how this needs to work but my research into it has led to framework-based solutions or solutions that I do not yet understand. I'd like assistance actually understanding the final solution if possible and also being able to adapt it further by myself.

As stated, I've tried to research similar problems and have come up with solutions (None of which I understand or which use vanilla JavaScript exclusively).

// Using a constructor to pre-define what data will be included for each 
car

function carCreator(make,model,colour,image,registrationNumber,price) {
  this.make = make;
  this.model = model;
  this.colour = colour;
  this.image = image;
  this.registrationNumber = registrationNumber;
  this.price = price;
}

// Adding data to car variables using the constructor function

let volkswagenPolo = new carCreator("Volkswagen","Polo","White","","ND 
123 456","R125 000");
let chevroletSpark = new carCreator("Chevrolet","Spark","Black","","ND 
654 321","R112 000");
let renaultClio = new carCreator("Renault","Clio","Red","","ND 456 
789","R225 000");
let kiaPicanto = new carCreator("Kia","Picanto","Grey","","ND 987 
6546","R185 000");
let fordFiesta = new carCreator("Ford","Fiesta","Orange","","ND 123 
987","R295 000");

// This is my idea of what I think needs to happen at the next stage in 
// order to get each of these vehicles to display. 

// - Use JavaScript to create HTML elements for each data point (Make, 
// model, colour, etc). 
// - Use a forEach loop to iterate through the file until each vehicle has 
// had it's own HTML created.

Answer 1

In JavaScript, to add an element to the body of your HTML document, you do:

let myDiv = document.createElememt("div") // creates a div element (could be any element)
document.body.appendChild(myDiv) // appends it to the body of the document

For more information on editing the HTML document using JavaScript see: https://www.w3schools.com/js/js_htmldom_document.asp

Edit: Here is a working example:

let cars = []; // An Array to store all the cars in so you can use forEach on it

function carCreator(make, model, colour, image, registrationNumber, price) {
  this.make = make;
  this.model = model;
  this.colour = colour;
  this.image = image;
  this.registrationNumber = registrationNumber;
  this.price = price;
  cars.push(this);
}

let volkswagenPolo = new carCreator("Volkswagen", "Polo", "White", "", "ND 123 456", "R125 000");
let chevroletSpark = new carCreator("Chevrolet", "Spark", "Black", "", "ND 654 321", "R112 000");
let renaultClio = new carCreator("Renault", "Clio", "Red", "", "ND 456 789", "R225 000");
let kiaPicanto = new carCreator("Kia", "Picanto", "Grey", "", "ND 987 6546", "R185 000");
let fordFiesta = new carCreator("Ford", "Fiesta", "Orange", "", "ND 123 987", "R295 000");

cars.forEach(car => {
  let card = document.createElement("div") // creates a div element for the Card
  card.className = "card" // Sets the class name so we can style it with CSS
  document.body.appendChild(card) // Adds the card to the body
  let make = document.createElement("p"); // creates A paragraph element
  make.innerText = "Make: " + car.make; // sets the text inside it to "Make: " + the car's make
  card.appendChild(make) // adds the element to the card

  let model = document.createElement("p"); // creates A paragraph element
  model.innerText = "Model: " + car.model; // sets the text inside it to "Model: " +  car's model
  card.appendChild(model) // adds the element to the card

  let colour = document.createElement("p"); //creates A paragraph element
  colour.innerText = "Colour: " + car.colour; //sets the text inside it to "Colour: " + the car's colour
  card.appendChild(colour) //adds the element to the card

  if (car.image) { // checks if the car has an image
    let image = document.createElement("img"); //creates A image element
    image.src = car.image; //sets the image src car's image (link)
    card.appendChild(image) // adds the element to the card
  }


  let registrationNumber = document.createElement("p"); // creates A paragraph element
  registrationNumber.innerText = "Registration Number: " + car.registrationNumber; // sets the text inside it to "Registration Number: " + car's registrationNumber
  card.appendChild(registrationNumber) // adds the element to the card

  let price = document.createElement("p"); //creates A paragraph element
  price.innerHTML = "Price:" + car.price; // sets the text inside it to "Price: " + car's price
  card.appendChild(price) //adds the element to the card
})

p {
  display: inline;
  margin: 10px;
  padding: 10px;
}

.card {
  border-style: solid;
  border-width: 10px;
  border-color: #000000;
  padding: 10px;
  margin: 10px;
}

(The CSS makes it look like a card)

Hopefully, this helps.

Answer 2

let cars = [];

function carCreator(make, model, colour, image, registrationNumber, price) {
    this.make = make;
    this.model = model;
    this.colour = colour;
    this.image = image;
    this.registrationNumber = registrationNumber;
    this.price = price;
    cars.push(this);
}

let volkswagenPolo = new carCreator("Volkswagen", "Polo", "White", "", "ND 123 456", "R125 000");
let chevroletSpark = new carCreator("Chevrolet", "Spark", "Black", "", "ND 654 321", "R112 000");
let renaultClio = new carCreator("Renault", "Clio", "Red", "", "ND 456 789", "R225 000");
let kiaPicanto = new carCreator("Kia", "Picanto", "Grey", "", "ND 987 6546", "R185 000");
let fordFiesta = new carCreator("Ford", "Fiesta", "Orange", "", "ND 123 987", "R295 000");

for (let x = 0; x < cars.length; x++) {
    let make = document.createElement("p");
    make.innerHTML = cars[x].make;
    document.body.appendChild(make)

    let model = document.createElement("p");
    model.innerHTML = cars[x].model;
    document.body.appendChild(model)

    let colour = document.createElement("p");
    colour.innerHTML = cars[x].colour;
    document.body.appendChild(colour)

    let image = document.createElement("p");
    image.innerHTML = cars[x].image;
    document.body.appendChild(image)

    let registrationNumber = document.createElement("p");
    registrationNumber.innerHTML = cars[x].registrationNumber;
    document.body.appendChild(registrationNumber)

    let price = document.createElement("p");
    price.innerHTML = cars[x].price;
    document.body.appendChild(price)
}

Replace the paragraph by the element you like.

EDIT

Or just do it within the function:

function carCreator(make, model, colour, image, registrationNumber, price) {
    this.make = make;
    this.model = model;
    this.colour = colour;
    this.image = image;
    this.registrationNumber = registrationNumber;
    this.price = price;

    let makeElement = document.createElement("p");
    makeElement.innerHTML = this.make;
    document.body.appendChild(makeElement)

    let modelElement = document.createElement("p");
    modelElement.innerHTML = this.model;
    document.body.appendChild(modelElement)

    let colourElement = document.createElement("p");
    colour.innerHTML = this.colour;
    document.body.appendChild(colourElement)

    let imageElement = document.createElement("p");
    imageElement.innerHTML = this.image;
    document.body.appendChild(imageElement)

    let registrationNumberElement = document.createElement("p");
    registrationNumberElement.innerHTML = this.registrationNumber;
    document.body.appendChild(registrationNumberElement)

    let priceElement = document.createElement("p");
    priceElement.innerHTML = this.price;
    document.body.appendChild(priceElement)
}

let volkswagenPolo = new carCreator("Volkswagen", "Polo", "White", "", "ND 123 456", "R125 000");
let chevroletSpark = new carCreator("Chevrolet", "Spark", "Black", "", "ND 654 321", "R112 000");
let renaultClio = new carCreator("Renault", "Clio", "Red", "", "ND 456 789", "R225 000");
let kiaPicanto = new carCreator("Kia", "Picanto", "Grey", "", "ND 987 6546", "R185 000");
let fordFiesta = new carCreator("Ford", "Fiesta", "Orange", "", "ND 123 987", "R295 000");

Answer 3

So in order to dynamically create a HTML element you can use document.create() to create an element and keep on adding child elements to it using the usual JS methods like document.appendChild().

However, personally, whenever I need to make complicated nested dynamic content, I like to define my reusable block of code inside a template tag in the HTML itself.

For example:

<template id="car-card-template">
    <section id="car-card-title">
    </section>
    <section id="car-card-body">
        <span class="car-model"></span>
        <span class="car-price"></span>
        <span class="car-registrationNo"></span>
    </section>  
 </template>`

When you define something inside a template tag, it does not get rendered on the web page. However it's much easier to visualize your elements this way.

Now coming to the dynamic part, you loop through your array of car objects and create a copy of the innerHTML of this template and append it to your desired location in the DOM.

You can access and style the different portions of the card easily with the help of the css identifiers that you attach to them, eg. "car-model"

I hope this helps :)