js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu

1. Fügen Sie zuerst das ul-Tag im Textkörper hinzu

<!-- Ungeordnete Liste -->
<ul id="Liste">
	
</ul>

2. Holen Sie sich das Tag mit der ID gleich der Liste über js, definieren Sie eine leere Zeichenfolge, um die hinzugefügten Tags zu verbinden, und zeigen Sie sie an

Der in der Abbildung gezeigte JS-Code zeigt die Kreisnummern mit unterschiedlichen Farben für die ersten drei und den gleichen Farben für die restlichen Kreise.

Funktion autoAddList(){
  var oUl = document.getElementById('Liste');
  // var arr = ['Hunan', 'Guangxi', 'Xinjiang', 'Shanghai']
  var str = "";
  für (sei i = 1; i < 13; i++) {
    wenn (i == 1) {
      str += '<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';
    }sonst wenn (i == 2) {
      str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';
    }sonst wenn (i == 3) {
      str += '<li><span style="Hintergrundfarbe: grün">' + i + '</span></li>' + '<br>';
    }anders{
      str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';
    }    
  }
  oUl.innerHTML = str;
}

3. CSS-Stiländerung

/*Listenstil festlegen*/
ul{
  Listenstiltyp: keiner;
}

list-style-type: none bedeutet kein Logo, und die Attribute können auch ausgefüllte Kreise, ausgefüllte Quadrate, Zahlen usw. sein.

Um die Seriennummern ordentlich anzuordnen, müssen Sie den Span-Stil festlegen

/*Als Inline-Blockelement festlegen*/
li span{
	Anzeige: Inline-Block;
}

Der Effekt ist in der folgenden Abbildung dargestellt

Dies ist das Ende dieses Artikels zum dynamischen Hinzufügen einer Liste eingekreister Zahlen mit js. Weitere relevante Inhalte zum dynamischen Hinzufügen einer Liste eingekreister Zahlen mit js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!