HTML 中li元素动态添加包含变量和字符串的方法

HTML 中li元素动态添加包含变量和字符串的方法

​ 背景：最近在写网页前端时，需要解决一个问题l元素需要包含一个变量和一个字符串，字符串是不变的，但变量的值是通过后端数据库ajax方式取到的。

效果图如下：

最终实现字符串不变，只实现字符串的数值随着数据库传递的值变话而变化。

解决办法1：

对将ul中元素空着，通过jQuery的append来添加li元素来实现，代码如下：

//html代码
<div class="top-list">
					<ul id='aaa'>
						//整个的空着，你需要几个li元素，写几个append
					</ul>
				</div>

//js代码
<script>
    
  //通过ajax实现后端数据传递到前端
   var guairu;
   var guairuradio;
   var turnOutInteger;
   var TurnOutRatio;
   var acrossInteger;
   var acrossRatio;
   var localInteger;
   var localRatio;
   var nonlocalInteger;
   var nonlocalRatio;
 $.ajax({
	 	url: "/Flow",
			dataType: "json",
			type: "get",//发送请求的形式
			data: "e",//需要改变的数据
			async: false,
			success: function (e) {
				guairu=e.turnInInteger;
				guairuradio=e.TurnInRatio;
				turnOutInteger=e.turnOutInteger;
				TurnOutRatio=e.TurnOutRatio;
				acrossInteger=e.acrossInteger;
				acrossRatio=e.acrossRatio;
				localInteger=e.localInteger;
				localRatio=e.localRatio;
				nonlocalInteger=e.nonlocalInteger;
				nonlocalRatio=e.nonlocalRatio;
			},
			error: function (e) {

			}
		});
   // ***********************************第一种方法*********************************
   var test=[];
   test[0]='进站:      '+guairu;
   test[1]='进站同比：  '+guairuradio;
   test[2]='出站：          '+turnOutInteger;
   test[3]='出站同比：  '+TurnOutRatio;
   test[4]='路过：         '+acrossInteger;
   test[5]='路过同比：  '+acrossRatio;
   test[6]='本地：          '+localInteger;
   test[7]='本地同比：   '+localRatio;
   test[8]='外地：          '+nonlocalInteger;
   test[9]='外地同比：  '+nonlocalRatio;
   //最后用append添加li元素
   $('#aaa').append('<li >'+test[0]+'</li>'); 
   $('#aaa').append('<li >'+test[1]+'</li>'); 
   $('#aaa').append('<li >'+test[2]+'</li>'); 
   $('#aaa').append('<li >'+test[3]+'</li>'); 
   $('#aaa').append('<li >'+test[4]+'</li>');
   $('#aaa').append('<li >'+test[5]+'</li>');
   $('#aaa').append('<li >'+test[6]+'</li>');
   $('#aaa').append('<li >'+test[7]+'</li>');
   $('#aaa').append('<li >'+test[8]+'</li>');
   $('#aaa').append('<li >'+test[9]+'</li>');

 //也可以不用数组，直接输出，如下：
  $('#aaa').append('<li >'+'进站:      '+guairu+'</li>'); 
//*****************************************************************
</script>

解决办法2：

将使用innertext的属性来添加元素，但这个时候li元素不能空着，代码如下：

//html代码
<div class="top-list">
					<ul id='aaa'>
						<li> </li> //有几个li就需要提前写好几个空着
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>
						<li> </li>

					</ul>
				</div>

 //**************************第二种方法，只需替换上面相应标记的代码即可************************* 
  var clist = $('#aaa').children();
  clist[0].innerText = '进站:      '+guairu;
  clist[1].innerText = '进站同比：  '+guairuradio;
  clist[2].innerText = '出站：          '+turnOutInteger;
  clist[3].innerText = '出站同比：  '+TurnOutRatio;
  clist[4].innerText = '路过：         '+acrossInteger;
  clist[5].innerText = '路过同比：  '+acrossRatio;
  clist[6].innerText = '本地：          '+localInteger;
  clist[7].innerText = '本地同比：   '+localRatio;
  clist[8].innerText = '外地：          '+nonlocalInteger;
  clist[9].innerText = '外地同比：  '+nonlocalRatio;
  //**************************************************************************************

最后实现效果图如下：