循环拼接HTML

<!--<ul>
  <li style="color: red"><span>1</span></li>
  <li style="color: blue"><span>2</span></li>
  <li style="color: yellow"><span>3</span></li>
  <li style="color: black"><span>4</span></li>
</ul>-->

<div id="div1"></div>
<script src="./Scripts/Common/jquery.min.js"></script>

<script>
  var aps=[
    {value: 1, color: 'title1'},
    {value: 2, color: 'title2'},
    {value: 3, color: 'title3'},
    {value: 4, color: 'title4'}
  ];



  function addItem (listItem) {


    console.log(listItem);
  if(listItem.color=='title1'){
    listItem.color='red';
  }
  if(listItem.color=='title2'){
    listItem.color='blue';
  }
  if(listItem.color=='title3'){
    listItem.color='green';
  }
  if(listItem.color=='title4'){
    listItem.color='#fef';
  }
    var item = '';
    item += '<li style=color:'+ listItem.color+'>';
    item +=  '<span >'+listItem.value+'</span>';
    item +='</li>';
    return item;
  }
  var ContentStr = '';
  ContentStr += '<ul>';
  for (var i = 0; i < aps.length; i++) {
    ContentStr += addItem (aps[i])

  }
  ContentStr += '</ul>';
  $('#div1').html(ContentStr);
</script>