This code dynamically adds fruits list into your html code.
const fruits = ["Apples", "Oranges", "Pears", "Grapes", "Pineapples", "Mangos"];
let liList = "";
fruits.forEach(item => {
liList = liList + `<li>${item}</li>`;
});
document.querySelector("#insertFruits").innerHTML = liList;
<main>
<section class="main center">
<!-- Start your code here -->
<h2>HTML Lists</h2>
<div id="fruit">
<body>
<h2>Fruit</h2>
<ul id="insertFruits">
</ul>
</body>
</div>
<div id="directories">
<body>
<h2>Directories</h2>
</body>
</div>
<!-- End your code here -->
</section>
</main>
You can print array in your javascript file by adding below line just after ‘const fruits’ declaration :
document.getElementById("fruitList").innerHTML=fruits;
So, if you want to print the fruits array just below the text ‘Fruit’, then add a ‘div’ element within your ‘fruit’ ‘div’ with id ‘fruitList’ as shown below, so it will print the array below it:
<div id="fruit">
<body>
<h2>Fruit</h2>
<div id="fruitList">
</div>
</div>
</body>
</div>
For rendering array of items first we have to get body to our script, because we are going to attach list to body.
const body = document.querySelector("body");
Then we are looping array and creating div tag,
const div = document.createElement("div"); (btw it can be any tag)
And we give a value to div
div.innerText = fruit
And in the end attach div to body
const body = document.querySelector("body");
fruits.forEach((fruit) => {
const div = document.createElement("div");
div.innerText = fruit;
body.appendChild(div);
});
I am doing my assignment but I haven’t used javascript on HTML before.
This is my HTML file(list.html).
<main>
<section class="main center">
<!-- Start your code here -->
<h2>HTML Lists</h2>
<div id="fruit">
<body>
<h2>Fruit</h2>
</body>
</div>
<div id="directories">
<body>
<h2>Directories</h2>
</body>
</div>
<!-- End your code here -->
</section>
</main>
and this is my javascript file(list.js).
const fruits = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Pineapples', 'Mangos'];
/* I wrote this part (var i = 0; i < 6; i ++)
console.log fruits(i);*/
const directory = [
{ type: 'file', name: 'file1.txt' },
{ type: 'file', name: 'file2.txt' },
{
type: 'directory',
name: 'HTML Files',
files: [
{ type: 'file', name: 'file1.html' },
{ type: 'file', name: 'file2.html' }
]
},
{ type: 'file', name: 'file3.txt' },
{
type: 'directory',
name: 'JavaScript Files',
files: [
{ type: 'file', name: 'file1.js' },
{ type: 'file', name: 'file2.js' },
{ type: 'file', name: 'file3.js' }
]
}
];
I have to print out fruits array, but I don’t know how to make it print out on the webpage. I can only check it on dev tool.
