js动态添加带圆圈序号列表的实例代码

下面是详细的“JS动态添加带圆圈序号列表的攻略”：

步骤一：准备HTML结构

在HTML中，需要准备一个包含序号的圆圈的列表结构。我们可以使用HTML自带的ul和li标签来实现：

<ul id="myList">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

注意：需要在ul标签中添加一个id属性，方便在JS中操作该元素。

步骤二：准备CSS样式

为了让序号以圆圈的形式展示，需要给li元素添加CSS样式：

li {
  list-style-type: none;
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

li:before {
  content: '\25CF';
  color: #000;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

说明：这里使用CSS伪元素:before来设置圆圈，同时需要给li元素添加相对定位，以及在伪元素中设置绝对定位。

步骤三：使用JS动态添加序号

有了HTML和CSS的基础，我们就可以使用JS来动态添加序号了。首先，需要获取到ul元素：

var ul = document.getElementById('myList');

然后，遍历li元素，使用循环为li元素添加序号：

var lis = ul.getElementsByTagName('li');
for(var i = 0; i < lis.length ; i++) {
  lis[i].setAttribute('data-num', i+1);
  lis[i].innerHTML = lis[i].getAttribute('data-num') + '. ' + lis[i].innerHTML;
}

说明：在循环中，首先要为每个li元素设置一个data-num属性，属性值为当前索引加1（从1开始）；然后，将li元素的HTML内容修改为序号和原本的内容的组合。

示例1：给已有列表动态添加序号

假设我们已经有了一个没有序号的ul列表，只有一堆杂乱的li元素，我们需要JS动态地为这个列表添加序号：

<ul id="myList">
  <li>狗狗</li>
  <li>猫咪</li>
  <li>鸟儿</li>
  <li>乌龟</li>
  <li>金鱼</li>
</ul>

var ul = document.getElementById('myList');
var lis = ul.getElementsByTagName('li');
for(var i = 0; i < lis.length ; i++) {
  lis[i].setAttribute('data-num', i+1);
  lis[i].innerHTML = lis[i].getAttribute('data-num') + '. ' + lis[i].innerHTML;
}

运行上面的JS代码，就可以将这个无序列表变成带序号的圆圈列表了。

示例2：通过JS动态添加列表和序号

假设我们需要通过JS动态地创建一个列表，并且要给这个列表添加序号。可以通过下面的代码来实现：

<div id="myDiv"></div>

var div = document.getElementById('myDiv');
var ul = document.createElement('ul');
for(var i = 0; i < 5 ; i++) {
  var li = document.createElement('li');
  li.innerHTML = '列表项' + (i+1);

  li.setAttribute('data-num', i+1);
  li.innerHTML = li.getAttribute('data-num') + '. ' + li.innerHTML;

  ul.appendChild(li);
}
div.appendChild(ul);

上面的代码首先通过JS创建了一个空的div元素，然后创建了一个ul元素，并且添加了五个li元素，最后将ul元素添加到div中。在创建li元素的同时，也为它们添加序号。

这样，我们就完成了“JS动态添加带圆圈序号列表”的完整攻略，可以运用在日常的网页编写工作中，提高页面效率和美观程度。