Использование функций JavaScript для добавления динамического содержимого HTML

Question

Я пытаюсь динамически отображать данные транспортного средства от конструктора на странице HTML в виде отдельных карточек (каждая карточка будет содержать изображение, марку, модель, цвет, регистрационный номер и цену). Я хотел бы иметь возможность манипулировать каждой точкой данных индивидуально. Например, установка размера шрифта марки должна быть больше, чем, скажем, цена.

Я концептуально понимаю, как это должно работать, но мои исследования привели к основанным на фреймворке решениям или решениям, которые я еще не понимаю. Мне нужна помощь, чтобы понять окончательное решение, если это возможно, а также возможность самостоятельно адаптировать его.

Как уже говорилось, я пытался исследовать подобные проблемы и нашел решения (ни одно из которых я не понимаю или которые используют исключительно vanilla JavaScript).

// 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

Таким образом, для динамического создания HTML-элемента вы можете использовать document.create () для создания элемента и продолжать добавлять к нему дочерние элементы, используя обычные методы JS, такие как document.appendChild ().

Однако лично мне всякий раз, когда мне нужно создать сложный вложенный динамический контент, мне нравится определять свой повторно используемый блок кода внутри тега шаблона в самом HTML.

Например:

<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>`

Когда вы определяете что-то внутри тега шаблона, он не отображается на веб-странице. Однако так проще визуализировать ваши элементы.

Теперь перейдя к динамической части, вы перебираете свой массив автомобильных объектов, создаете копию innerHTML этого шаблона и добавляете его в нужное место в DOM.

Вы можете легко получить доступ и стилизовать различные части карты с помощью идентификаторов CSS, которые вы к ним прикрепляете, например. "Автомобиль-модель"

Надеюсь, это поможет:)

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)
}

Замените абзац на понравившийся элемент.

EDIT

Или просто сделайте это внутри функции:

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

В JavaScript, чтобы добавить элемент в тело вашего HTML-документа, вы делаете:

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

Для получения дополнительной информации о редактировании HTML-документа с использованием JavaScript см .: https://www.w3schools.com/js/js_htmldom_document.asp

Редактировать: Вот рабочий пример:

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;
}

(CSS делает его похожим на карту)

Надеюсь, это поможет.