Come posso creare un elemento h1 per ciascun valore di un array?

2020-04-03 javascript html

Ipoteticamente, dire che ho una matrice denominata "frutti" che includeva frutti diversi. Qualcosa che assomiglia a questo:

var fruits = ["bannanna", "apple", "orange", "grapes"]

Voglio creare un elemento h1 con ciascuno dei nomi nella matrice. Come faccio a fare questo?

Answers

Passa il mouse sugli elementi e usa insertAdjacentHTML per aggiungere l'elemento al corpo o dove vuoi aggiungerlo.

var fruits = ["bannanna", "apple", "orange", "grapes"]

fruits.forEach(item => document.body.insertAdjacentHTML('beforeend', `<h1>${item}</h1>`))

puoi farlo attraverso forOach.

<div id="generate-h1"></div>

var fruits = ["bannanna", "apple", "orange", "grapes"]

// Create any HTML Element to put H1 Tags into this HTML Tag
var main = document.createElement('main');

// Create H1 items for each fruits
// Append it to the main Tag or whatever you have.
fruits.forEach(function (fruits) {
    var headline = document.createElement('h1');
    headline.textContent = fruits;
    main.appendChild(headline);
});


// Inject into the DOM
var app = document.querySelector('#generate-h1');
app.appendChild(main);


Ok, prova questo, sono sicuro che funzionerà:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Try This</title>
  </head>
  <body>
    <h1 id="fruit"></h1>
    <script>
      var fruits = ["bannanna", "apple", "orange", "grapes"];
      var text = "";
      var i;
      for (i = 0; i < fruits.length; i++) {
        text += fruits[i] + "<br>";
      }
      document.getElementById("fruit").innerHTML = text;
    </script>
  </body>
</html>

Related