Guide on populating List Items <li> using CSS

Question

Guide on populating List Items <li> using CSS

My goal is to dynamically generate <li> elements from a CSS file, as opposed to manually defining them in the HTML.

Purpose/Goal: I have multiple HTML files, each containing a menu structured using LIST items (<li>).

Instead of adding each item individually to every HTML file, I would like to populate the list items using my CSS file. This way, if I need to add a new <li> in the future, I can do so without having to edit each HTML file separately. By simply adding one list item in the CSS file, it will automatically appear in all lists across my HTML files.

---CURRENT HTML CODE:

 <div id="menu">
    <ul>
      <li><a href="../index.html">Home</a> </li>
      <li><a href="../about-us.html">About us</a> </li>
    </ul>
 </div>

I am aiming to have <li> and <a> elements generated from CSS rather than hardcoded into the HTML file.

html css

Answer 1

Answer №1

This task can easily be accomplished using JavaScript

<html>

<script>

   function generateList() {
      // set up necessary variables
      var list = document.getElementById("list");
      var item01 = document.createElement("li");
      var item02 = document.createElement("li");

      // create list items
      item01.appendChild(document.createTextNode("Item 01"));
      item02.appendChild(document.createTextNode("Item 02"));

      // append list items to the list
      list.appendChild(item01);
      list.appendChild(item02);
   }

</script>

<body>

<ul id="list"></ul>

<script>
   // calling the function
   generateList();
</script>

</body>
</html>

It is recommended to keep the script in a separate JavaScript file and simply call it whenever you need to create your list

Answer 2

This task can easily be accomplished using JavaScript

<html>

<script>

   function generateList() {
      // set up necessary variables
      var list = document.getElementById("list");
      var item01 = document.createElement("li");
      var item02 = document.createElement("li");

      // create list items
      item01.appendChild(document.createTextNode("Item 01"));
      item02.appendChild(document.createTextNode("Item 02"));

      // append list items to the list
      list.appendChild(item01);
      list.appendChild(item02);
   }

</script>

<body>

<ul id="list"></ul>

<script>
   // calling the function
   generateList();
</script>

</body>
</html>

It is recommended to keep the script in a separate JavaScript file and simply call it whenever you need to create your list

Guide on populating List Items <li> using CSS

Answer №1

Similar questions

The dimensions of the webpage determined by the size of the screen, with a scrollable

What is the best way to place an icon in the lower right corner of a design

Updating an already opened HTML page from a Java application

Navigate through the items in my subnavbar by scrolling the content

Scrolling effect made with CSS for displaying a carousel of logos

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

Utilizing JSON for HTML conversion in Codeigniter

What are some methods for embedding HTML content onto a specific section of a webpage in a Node.js + Express application, without displaying it as the

Enhance the appearance of your image by adding a stylish frame or border without altering its

Guide on using a single submit button for two separate HTML forms

Sorting Columns in JQuery Datatables

Incorporating a hyperlink and an image into a table sourced from a database

How to prevent text from wrapping around images in WordPress

Are the site-wide navigation links working on one page but not the other?

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Adjusting the alignment of a facial image on Canvas by selecting specific click-points

Ways to display or conceal a textbox depending on the choice made from a dropdown list

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

What is the reason for min-content not being compatible with auto-fill or auto-fit?

I've noticed that my alert is not appearing when I click submit. Can someone please help me figure out what I could