How to dynamically add commas between list of items in JavaScript?-JS Tutorial-php.cn

How to dynamically add commas between list of items in JavaScript?

WBOY

Release： 2023-09-08 17:33:02

forward

1640 people have browsed it

如何在 JavaScript 中动态添加项目列表之间的逗号？

We can use the CSS "::before" pseudo-element to dynamically add a comma before each list item, except the first one. By targeting the list item and using the "content" property, we can insert a comma before the content of the list item. Additionally, we can use the ":not(:first-child)" pseudo-class to ensure that only non-first list items are added with commas.

Suppose we have the following HTML DOM:

<ul class="dynamic-list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

Copy after login

We will discuss in this article two different methods that can be used to achieve the same end goal: adding a comma after each list item except the last one.

So, let’s discuss each method one by one.

Method 1: Using CSS

One way to dynamically add commas between list items using CSS is to use the ::before pseudo-element on the list items.

Within each li ::before pseudo-element (except the first li child element), we will add a comma and this will solve the problem.

The code to do this is -

.dynamic-list li {
  display: inline-block;
}
.dynamic-list li::before {
  content: ", ";
}
.dynamic-list li:first-child::before {
  content: "";
}

Copy after login

This will add a comma and space before each list item except the first. The first item has nothing before it, so there is no comma before it.

Method 2: Using JavaScript

Alternatively, you can use javascript or jquery to dynamically add commas between list items. Here we will use pure JavaScript to dynamically add commas between a list of items.

The code to do this would be -

var list = document.getElementById("dynamic-list");
var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
   if (i > 0) {
      items[i].innerHTML = ", " + items[i].innerHTML;
   }
}

Copy after login

This code first selects the list by ID and then gets all the list items. Then it loops through each item and checks if it's not the first item, if not it adds a comma and space before the item content.

Example

The last piece of code is -

<!DOCTYPE html>
<html>
<head>
   <title>Comma Separated List</title>
</head>
<style>
   li {
      display: inline-block;
      color: black;
   }
</style>
   <body>
      <ul id="dynamic-list">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
         <li>Item 4</li>
      </ul>
      <script>
         var list = document.getElementById("dynamic-list");
         var items = list.getElementsByTagName("li");
         for (var i = 0; i < items.length; i++) {
            if (i > 0) {
               items[i].innerHTML = ", " + items[i].innerHTML;
            }
         }
      </script>
   </body>
</html>

Copy after login

The above is the detailed content of How to dynamically add commas between list of items in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!