在前端应用中,经常需要在js中动态拼接HTML页面,比如应用ajax进行局部刷新的时候,就需要在js中拼接HTML页面。
主要规则是将HTML页面的标签拼接为标签字符创,要特别注意的是标签中的变量或数值。
小编在此只贴出部分关键代码
在上述的table标签中拼接页面。拼接页面的内容如下:
KaTeX parse error: Expected '}', got 'EOF' at end of input: … .ajaxSettings.async = false; //同步
KaTeX parse error: Expected '}', got 'EOF' at end of input: … .dialog.tips(“未检测到串口设备”,1,“hits.png”);
return ;
}else{
for(var i=1; i<= length;i++){
//拼接列表页面
var tableContent = “”;
tableContent += ‘’;
tableContent += ‘com’+i+’ 波特率’; //注意变量的拼接方式
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘110’;
tableContent += ‘300’;
tableContent += ‘600’;
tableContent += ‘1200’;
tableContent += ‘2400’;
tableContent += ‘4800’;
tableContent += ‘9600’;
tableContent += ‘14400’;
tableContent += ‘19200’;
tableContent += ‘38400’;
tableContent += ‘57600’;
tableContent += ‘115200’;
tableContent += ‘230400’;
tableContent += ‘460800’;
tableContent += ‘1024000’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘数据位’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘5’;
tableContent += ‘6’;
tableContent += ‘7’;
tableContent += ‘8’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘停止位’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘1’;
tableContent += ‘2’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘校验位’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘无校验 None’;
tableContent += ‘偶校验 Even’;
tableContent += ‘奇校验 Odd’;
tableContent += ‘标记 Mark’;
tableContent += ‘空格 Space’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘’;
tableContent += ‘’;
//将拼接的内容追加到table标签里面
$("#serial_tab").append(tableContent);
}
}
}
});
loadConfig();
});
最后页面的结果如下图所示: 大家莫见怪,css 样式代码我就不贴出来了
注意事项:
1.在HTML页面中拼接时,需要特别注意含有事件的拼接以及拼接事件中的参数形式。
本人亲自经历:在刚开始拼接时,拼接的形式为:
拼装好之后,进行触发的时候,一直没有反应,原因是里面的参数的格式不能识别,需要将其变为字符串形式。正确的拼装形式为:
<a href=“javascript:void(0);” οnclick=delComment("’+commentInfo.commentId+’","’+activityId +’") class=“btn btn-white m-r-5”>
拼装好之后,点击进行触发就可识别。
2.当拼装的HTML里面需要获取后台中的值时,也可以用jQuery的形式获取:${userId}。
不过在拼装的时候,尽量先将他获取出来,然后再拼装页面的时候,直接使用就好了,避免出错的几率。
3.标签中间的文本中变量的使用拼接方式:
tableContent += ‘’+num+’’;
作者:点化人生
来源:CSDN
原文:https://blog.csdn.net/qq_35661171/article/details/84965455
版权声明:本文为博主原创文章,转载请附上博文链接!