JS: Dynamically add li elements and style them

question

I want to add dynamically acquired data to the li element of the ul tag, and style the dynamically added li element

solve

1. Create ul tags

code:

result:

2. Dynamically add li elements

code:

$('#main').append('<li class="item1" >'+ 768 +'</li>');

result:

3. Set the style of the added li element

Since when we dynamically add the li element, we give it the class attribute, so we can use the class selector to style the dynamically added li element

.item1{
    
    
	color: red;
	font-weight: bold;
}

result:

4. Others

If the data is dynamic, use tools such as jQuery to obtain the data asynchronously, and then fill in the corresponding place according to the above method