使用JavaScript函数添加动态HTML内容

Question

我试图将来自构造函数的车辆数据作为单独的卡片动态显示在HTML页面上（每张卡片将包含图像，品牌，型号，颜色，注册号和价格）。我希望能够分别操纵每个数据点。例如，将品牌的字体大小设置为大于价格。

我从概念上了解这是如何工作的，但是我对它的研究导致了基于框架的解决方案或我尚不了解的解决方案。我希望协助在可能的情况下真正理解最终的解决方案，并让我自己进一步适应它。

如上所述，我已经尝试研究类似的问题并提出了解决方案（我什至不了解或仅使用香草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

在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

有关使用JavaScript编辑HTML文档的更多信息，请参见：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使它看起来像一张卡片）

希望这会有所帮助。

Answer 2

因此，为了动态创建HTML元素，您可以使用document.create（）创建元素，并继续使用诸如document.appendChild（）之类的常规JS方法向其添加子元素。

但是，就个人而言，每当我需要制作复杂的嵌套动态内容时，我都希望在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 3

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

用您喜欢的元素替换段落。

编辑

或者只是在函数中执行

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");