Définir innerHTML d'un div à = plusieurs éléments de tableau en utilisant getElementById

Question

J'essaye de finir avec le html <div id="animal"> Dog Cat Horse </div> mais je ne peux pas comprendre comment combiner plusieurs éléments de tableau dans un innerHTML. J'essaie quelque chose comme ceci:

var myArray = [ 
 
    ['Dog', 'Terrier'], 
 
    ['Cat', 'Tabby'], 
 
    ['Horse', 'Shetland'], 
 
]; 
 

 
for (i = 0; i < myArray.length; i++) { 
 
    document.getElementById('animal').innerHTML = locations[i][0]; 
 
};

<div id="animal"> animal names here </div>

Answer 1

Vous remplaçons le contenu de votre div à chaque itération dans la boucle.

Idéal serait de créer une chaîne de vos données et l'ajouter dans votre div. Au lieu d'accéder au dom à chaque itération

var myArray = [ 
 
    ['Dog', 'Terrier'], 
 
    ['Cat', 'Tabby'], 
 
    ['Horse', 'Shetland'], 
 
]; 
 
var data = ""; 
 
for (i = 0; i < myArray.length; i++) { 
 
    data += " " + myArray[i][0]; 
 
}; 
 

 
document.getElementById('animal').innerHTML = data;

<div id="animal"> animal names here </div>

Answer 2

Lorsque vous utilisez innerHTML =, il remplace tout le code HTML dans un élément. Vous devez utiliser += aussi ajouter au HTML interne.

for (i = 0; i < myArray.length; i++) { 
    document.getElementById('animal').innerHTML+= ' ' + myArray[i][0]; 
} 

Answer 3

var myArray = [ 
    [ 'Dog' , 'Terrier'], 
    [ 'Cat' , 'Tabby' ], 
    [ 'Horse' , 'Shetland'], 
]; 

for (i = 0; i < myArray.length; i++) { 
    document.getElementById('animal').innerHTML += " " + myArray[i][0] ; 
}; 

link ici

Answer 4

Vous écrasez actuellement le contenu de #animal à chaque itération, de sorte que le dernier élément est affiché. Vous devez concaténer innerHTML de #animal pour que les nouveaux éléments soient ajoutés au code HTML existant. Notez également que vous pouvez ajouter du code HTML supplémentaire, par exemple un tag <br/>, afin de diviser les lignes pour plus de lisibilité.

var myArray = [ 
 
    ['Dog', 'Terrier'], 
 
    ['Cat', 'Tabby'], 
 
    ['Horse', 'Shetland'], 
 
]; 
 

 
for (i = 0; i < myArray.length; i++) { 
 
    document.getElementById('animal').innerHTML += myArray[i][0] + "</br>"; 
 
};

<div id="animal"></div>

Enfin, le balisage pour produire vos animaux ressemble à un emploi pour une liste ordonnée/non ordonnée. De plus comme @kb a souligné, il est préférable d'adopter une approche plus moderne et idiomatiques et utiliser .map et comme @ gcampbell souligné, insertAdjacentHTML est plus rapide que innerHTML

var animals = [ 
 
    ['Dog', 'Terrier'], 
 
    ['Cat', 'Tabby'], 
 
    ['Horse', 'Shetland'], 
 
]; 
 

 

 
var animalNames = animals.map(function(animal) { 
 
    return "<li>" + animal[0] + "</li>"; 
 
    }) 
 
    .join(""); 
 

 
document.getElementById('animal').insertAdjacentHTML('beforebegin', animalNames);

<h3>Animals:</h3> 
 
<ul id="animal"></ul>

Answer 5

Vous pouvez utiliser le tableau de conversion de chaîne

document.getElementById('animal').innerHTML = myArray.toString().replace(",", " ") 

fiddle

Answer 6

essayer quelque chose comme ça:

var myArray = [ 
[ 'Dog' , 'Terrier'], 
[ 'Cat' , 'Tabby' ], 
[ 'Horse' , 'Shetland'], 
]; 

var myStr; 

mtStr ="" 

for (i = 0; i < myArray.length-1; i++) { 
    myStr += myArray[i]; 
} 

document.getElementById('animal').innerHTML= myStr;