Home > Article > Web Front-end > How to dynamically add commas between list of items in JavaScript?

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

WBOYforward: 2023-09-08 17:33:021615browse

如何在 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>

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: "";
}

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

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>

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!

JavaScript jquery css html 循环 dom 伪类伪元素 li

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to disable selectivity of Triangle using FabricJS?Next article：How to disable selectivity of Triangle using FabricJS?

See more

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

Method 1: Using CSS

Method 2: Using JavaScript

Example

Related articles