javascript - 使用 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.

标签： javascripthtmlcssdomconstructor

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使它看起来像一张卡片）

希望这会有所帮助。