js中拼接HTML方式方法以及注意事项

最新推荐文章于 2025-07-02 07:17:54 发布

原创最新推荐文章于 2025-07-02 07:17:54 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

html 同时被 2 个专栏收录

18 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍如何在前端应用中利用JavaScript动态拼接HTML页面，包括处理变量、事件及后台值的技巧。通过实例演示拼接流程，解决常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端应用中，经常需要在js中动态拼接HTML页面，比如应用ajax进行局部刷新的时候，就需要在js中拼接HTML页面。

主要规则是将HTML页面的标签拼接为标签字符创，要特别注意的是标签中的变量或数值。

小编在此只贴出部分关键代码

在上述的table标签中拼接页面。拼接页面的内容如下：

$(function(){
        //首先获取串口数量然后动态生成table表格
        $.ajaxSettings.async = false; //同步
          $.getJSON("scanner!totalSerialCount.action","",function(result){
          var length = result["count"];
               if(result != null){
               if(result["count"] ==0){
                   $.dialog.tips("未检测到串口设备",1,"hits.png");
                   return ;
               }else{
                   for(var i=1; i<= length;i++){
                   //拼接列表页面
var tableContent = "";
                   tableContent += '<tr>';
                   tableContent += '<td width="9%;" height="38">com'+i+'  波特率</td>'; //注意变量的拼接方式
                   tableContent += '<td width="200px;">';
                   tableContent += '<select name="baud" id="baud'+i+'" style="width:150px;height:28px;" class="df">';
                   tableContent += '<option value="110">110</option>';
                   tableContent += '<option value="300">300</option>';
                   tableContent += '<option value="600" >600</option>';
                   tableContent += '<option value="1200">1200</option>';
                   tableContent += '<option value="2400">2400</option>';
                   tableContent += '<option value="4800">4800</option>';
                   tableContent += '<option value="9600" >9600</option>';
                   tableContent += '<option value="14400">14400</option>';
                   tableContent += '<option value="19200">19200</option>';
                   tableContent += '<option value="38400">38400</option>';
                   tableContent += '<option value="57600">57600</option>';
                   tableContent += '<option value="115200">115200</option>';
                   tableContent += '<option value="230400">230400</option>';
                   tableContent += '<option value="460800">460800</option>';
                   tableContent += '<option value="1024000">1024000</option>';
                   tableContent += '</select>';
                   tableContent += '</td>';
                   tableContent += '<td width="5%;">数据位</td>';
                   tableContent += '<td width="200px;">';
                   tableContent += '<select name="databit" id="databit'+i+'" style="width:150px;" class="df">';
                   tableContent += '<option value="5">5</option>';
                   tableContent += '<option value="6">6</option>';
                   tableContent += '<option value="7">7</option>';
                   tableContent += '<option value="8" >8</option>';
                   tableContent += '</select>';
                   tableContent += '</td>';

                   tableContent += '<td width="5%;">停止位</td>';
                   tableContent += '<td width="200px;">';
                   tableContent += '<select name="stopbit" id="stopbit'+i+'" style="width:150px;" class="df">';
                   tableContent += '<option value="1" >1</option>';
                   tableContent += '<option value="2" >2</option>';
                   tableContent += '</select>';
                   tableContent += '</td>';
                   tableContent += '<td width="5%;">校验位</td>';
                   tableContent += '<td width="200px;">';
                   tableContent += '<select name="checkbit" id="checkbit'+i+'" style="width:150px;" class="df">';
                   tableContent += '<option value="None">无校验 None</option>';
                   tableContent += '<option value="e">偶校验 Even</option>';
                   tableContent += '<option value="o">奇校验 Odd</option>';
                   tableContent += '<option value="m">标记 Mark</option>';
                   tableContent += '<option value="s">空格 Space</option>';
                   tableContent += '</select>';
                   tableContent += '</td>';
                   tableContent += '<td>';
                   tableContent += '<input type="button" class="btn" value="确认保存" onclick="saveConfig('+i+')" style="margin-top:3px;"/>';
                   tableContent += '</td>';
                   tableContent += '</tr>';

//将拼接的内容追加到table标签里面
                   $("#serial_tab").append(tableContent);
                   }
               }
               }
       });
       loadConfig();
   });

最后页面的结果如下图所示: 大家莫见怪,css 样式代码我就不贴出来了