append()拼接html内容示例 和函数封装调用

示例1

var avgdifficulty = levelreport.avgdifficulty;//难易程度
if(avgdifficulty == 10){//易
	var zdifficultpic = '<img src="/mobile/static/images/testreport7.png"/>';
	var zdifficult = '易';
}else if(avgdifficulty == 20){//较易
	var zdifficultpic = '<img src="/mobile/static/images/testreport6.png"/>';
	var zdifficult = '较易';
}else if(avgdifficulty == 30){//中档
	var zdifficultpic = '<img src="/mobile/static/images/testreport5.png"/>';
	var zdifficult = '中档';
}else if(avgdifficulty == 40){//较难
	var zdifficultpic = '<img src="/mobile/static/images/testreport4.png"/>';
	var zdifficult = '较难';
}else{//难
	var zdifficultpic = '<img src="/mobile/static/images/testreport3.png"/>';
	var zdifficult = '难';
}
var htmlinfo = '<div class="gradeanalysis">'+
			'<h2>- 难度分析 - </h2>'+
			'<div class="zdifficult">综合难度：<span>'+zdifficultpic+'</span><span>'+zdifficult+'</span></div>'+
			'<div class="studentinfo">'+scalehtml+'</div>'+
		'</div>';

定义 zdifficultpic 和 zdifficult，将变量放到append()的html中，这样不会出现内容插不进去的情况。

示例2

判断内容长度 > 0，如果有就显示，反之。由于这个地方内容是简单重复的 ，所以用一个function()传参来简写，内容如下：

function reports(difficultpic,trhtml){
	var html = '<div class="difficultbox">'+
				'<div class="difficultleft fl"><img src="'+difficultpic+'"/></div>'+
				'<div class="difficultright fl">'+
				'<table width="100%" class="table1" id="tablevalue1">'+
					'<thead>'+
						'<tr>'+
							'<th width="32%">对应题号</th>'+
							'<th width="28%">对/错</th>'+
							'<th width="40%">平均得分率</th>'+
						'</tr>'+
					'</thead>'+
					'<tbody data-role="dtbody">'+trhtml+'</tbody></table></div>'+
					'<div class="clearfix"></div></div>';
	return html;
}
var testreport8 = '/mobile/static/images/testreport8.png'; //对号
var testreport9 = '/mobile/static/images/testreport9.png'; // 错号
var hardersortnums = levelreport.hardersortnums;
var hardersortArr = levelreport.hardersortArr;

if(hardersortnums.length > 0){//困难 判断是否有题 没有题隐藏
	var trhtml = '';
	for(var i = 0;i<hardersortArr.length; i++){
		if(hardersortArr[i]['result'] == '正确'){
			results = testreport8;
		}else{
			results = testreport9;
		}
		trhtml += '<tr><td>'+hardersortArr[i]['sortnum']+'</td>'+
				  '<td><img src="'+results+'"/></td><td>'+hardersortArr[i]['score']+'</td></tr>';
	}
	reportshtml = reports('/mobile/static/images/difficult1.png',trhtml); //调用方法
	$('[data-role="difficultbox"]').append(reportshtml);
}