У меня есть массив
var persons = ["Niko", "Jon", "Elica"];
Я хотел бы отобразить этот массив в моем HTML.
Как мне это сделать?
У меня есть рабочий пример для вас:
var persons = ["Niko", "Jon", "Elica"];;
for(var i = 0; i < persons.length; i++)
{
document.body.innerHTML += '<div >' + persons[i] + '</div>';
}
<body>
</body>
var persons = ["Niko", "Jon", "Elica"];
persons.forEach(function(person){
document.getElementById("mylist").innerHTML += '<li >' + person + '</li>';
});
<body>
<h1>My A-List</h1>
<UL id="mylist">
</ul>
</body>
Это просто и легко, но для более надежного приложения лучше использовать DOM для создания элементов LI и добавлять каждый из них в неупорядоченный список, где каждому значению массива присваивается значение текстового узла для каждого элемента LI с использованием элемента LI innerHTML. свойство, а именно:
var persons = ["Niko", "Jon", "Elica"];
var ul = document.getElementById("mylist");
var li = null;
persons.forEach(function(person){
var li=document.createElement('li');
ul.appendChild(li);
li.innerHTML=li.innerHTML + person;
});
<body>
<h1>My Better List</h1>
<ul id="mylist">
</ul>
</body>
Что вы могли бы сделать, так это перебрать массив так:
persons.forEach(function(person) {
//More code coming
}
И в рамках этого создайте несколько элементов списка и добавьте их в тело:
var persons = ["Niko", "Jon", "Elica"];
persons.forEach(function(person) {
var item = document.createElement("li");
item.innerText = person;
document.body.append(item);
});
<body></body>
И вот, пожалуйста!
Надеюсь, это поможет!