js dynamically adds example code for a list of circled numbers

1. Add the ul tag in the body first

<!-- Unordered list -->
<ul id="list">
	
</ul>

2. Get the tag with id equal to list through js, define an empty string to connect the added tags, and display them

The js code shown in the figure shows the circle numbers with different colors for the first three and the same colors for the remaining circles.

function autoAddList(){
  var oUl = document.getElementById('list');
  // var arr = ['Hunan', 'Guangxi', 'Xinjiang', 'Shanghai']
  var str = "";
  for (let i = 1; i < 13; i++) {
    if (i == 1) {
      str += '<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';
    }else if (i == 2) {
      str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';
    }else if (i == 3) {
      str += '<li><span style="background-color: green">' + i + '</span></li>' + '<br>';
    }else{
      str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';
    }    
  }
  oUl.innerHTML = str;
}

3.css style modification

/*Set the list style*/
ul{
  list-style-type: none;
}

list-style-type: none means no logo, and the attributes can also be hollow circles, solid squares, numbers, etc.

To arrange the serial numbers neatly, you need to set the span style

/*Set as inline block element*/
li span{
	display:inline-block;
}

The effect is shown in the figure below

This is the end of this article about how to dynamically add a circled number list with js. For more relevant content about how to dynamically add a circled number list with js, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!