Solution 1 :

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>

Solution 2 :

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>

Solution 3 :

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

Problem :

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.

Comments

Comment posted by research

Consider doing your own

Comment posted by Always Helping

innerHTML

Comment posted by Ferin Patel

modern browser are secure against XSS from innerHTML

Comment posted by including an explanation

Hello! While this code may solve the question,

By

Leave a Reply

Your email address will not be published. Required fields are marked *