Dev Faq
2
votes

Utilisation des fonctions JavaScript pour ajouter du contenu HTML dynamique

J'essaie d'afficher les données de véhicule d'un constructeur de manière dynamique sur une page HTML sous forme de cartes individuelles (chaque carte comprendra une image, une marque, un modèle, une couleur, un numéro d'immatriculation et un prix). Je voudrais pouvoir manipuler chaque point de données individuellement. Par exemple, définir la taille de la police de la marque pour qu'elle soit supérieure, par exemple, au prix.

Je comprends conceptuellement comment cela doit fonctionner, mais mes recherches à ce sujet ont conduit à des solutions ou des solutions basées sur un cadre que je ne comprends pas encore. J'aimerais avoir de l'aide pour comprendre la solution finale si possible et aussi pouvoir l'adapter davantage par moi-même.

Comme indiqué, j'ai essayé de rechercher des problèmes similaires et j'ai trouvé des solutions (dont je ne comprends rien ou qui utilisent exclusivement du JavaScript vanilla). 

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

0 commentaires

3 Réponses :

1
votes

En JavaScript, pour ajouter un élément au corps de votre document HTML, procédez comme suit: 

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

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

Pour plus d'informations sur la modification du document HTML à l'aide de JavaScript, consultez: https://www.w3schools.com/js/js_htmldom_document.asp

Modifier: Voici un exemple fonctionnel: 

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

(Le CSS le fait ressembler à une carte)

J'espère que cela aide.

3 commentaires

Merci pour le commentaire. C'est là que j'avais commencé à regarder mais j'étais un peu débordé, aussi stupide que cela puisse paraître à admettre. Si vous pouviez m'aider à comprendre, ce serait formidable. Disons que je veux créer une carte comme je l'ai décrit ci-dessus. Est-ce que je créerais un div pour héberger le contenu, puis ajouterais un en-tête à ce div, un paragraphe à cet en-tête pour les autres détails, un autre paragraphe au paragraphe existant, et ainsi de suite jusqu'à ce que tous les détails aient été inclus? Je pense que c'est là que c'est perdu pour moi. Je pourrais créer un élément mais je ne sais pas comment gérer plusieurs éléments et les structurer.

J'ai édité mon message pour ajouter un exemple qui est expliqué avec des commentaires.

Merci pour votre aide. J'ai réussi à faire fonctionner une variante de la vôtre que j'aime vraiment. Très appréciée!

2
votes

Donc, pour créer dynamiquement un élément HTML, vous pouvez utiliser document.create () pour créer un élément et continuer à y ajouter des éléments enfants en utilisant les méthodes JS habituelles comme document.appendChild ().

Cependant, personnellement , chaque fois que j'ai besoin de créer un contenu dynamique imbriqué compliqué, j'aime définir mon bloc de code réutilisable dans une balise de modèle dans le HTML lui-même.

Par exemple: 

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

2 commentaires

Merci beaucoup pour la suggestion modélisée. Cela me permet certainement de comprendre beaucoup plus facilement. Pourriez-vous me donner un exemple de la façon dont vous appelleriez ce modèle à partir de votre code JavaScript? Je suppose que vous le référenceriez simplement dans votre boucle forEach avec append?

@weylandswart Vous pouvez accéder au code à l'intérieur du modèle une fois en dehors de la boucle For et l'utiliser plusieurs fois. Cela réduira le nombre d'appels d'accès DOM. var main = document.getElementById ('main'); // le conteneur dans lequel vous allez ajouter let carTemplate = document.getElementById ('car-card-template'); templateHTML = carTemplate.innerHTML; for (let i = 0; i Atteignez le vote positif? :)

1
votes 

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

Remplacez le paragraphe par l'élément que vous aimez.

EDIT

Ou faites-le simplement dans la fonction: 

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

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO