zoukankan      html  css  js  c++  java
  • JS中字符串拼装 单双引号的处理 字符转义

    js中可能会用到动态追加元素,可能数据也是从后台传过来的,当然有两种思路,

    1.在后台拼装好直接返回;

    2.在前台js里面拼装,

    如果拼装大量的html时可能单双引号就容易出问题;那么如何解决呢?最近遇到了这个问题,就做一下总结.

    可以一句一句的拼装.

    注意点:html元素属性全部用 双引号 
    
    字符串用单引号
    
    
    var htmlline='<tr id="row'+obj.idArr+'">';
    
    htmlline +='<td style="text-align: left;padding-bottom:0px;">';
    
    htmlline +='<div id="" style="float:left;">';
    
    htmlline +='<div id="tdone_b_'+obj.idArr+'" style="float:left">';
    
    htmlline +='<div id="img_add_1" class="left closeImg" onclick="group.add_cate('+obj.idArr+')"></div>';
    
    htmlline +='</div>';
    
    htmlline +='<div id="" style="float:left">'+ formData.group_name +'</div>';
    
    htmlline +='</div>';
    
    htmlline +='</td>';
    
    htmlline +='<td class="tal" style="padding-bottom:0px;text-align: center;">'+ formData.sort +'</td>';
    
    htmlline +='<td style="text-align: center;padding-bottom:0px;">';
    
    htmlline +='<div class="childCategory" style="margin-left: 46px;">';
    
    htmlline +=' <a onclick="group.add(\'b\','+obj.idArr+')" href="javascript: void(0)">添加子分组</a>';
    
    htmlline +=' <a onclick="group.edit('+obj.idArr+')" href="javascript: void(0)">修改</a>';
    
    htmlline +=' <a onclick="group.dele(\'delp\','+obj.idArr+')" href="javascript: void(0)">删除</a>';
    
    htmlline +=' <a onclick="group.useConfirm(1,'+obj.idArr+')" href="javascript: void(0)">启用</a>';
    
    htmlline +='</div>';
    
    htmlline +='</td>';
    
    htmlline +='</tr>';
    htmlline +=' <a onclick="group.dele(\'delp\','+obj.idArr+')" href="javascript: void(0)">删除</a>';

    onclick中函数用一个参数为字符串,所以要加下转义字符

    这样拼装的看起来较整齐,写起来费时.

    如果认为此文对您有帮助,别忘了支持一下哦!

    作者:buyuCoder
    声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。
  • 相关阅读:
    https://developer.aliyun.com/ebook?utm_content=g_1000256420
    形容词在句子中的位置
    顺风水水
    https://www.youtube.com/watch?v=pVIywLXDuRo 有趣到流泪
    经济机器是怎样运行的 (时长30分钟) Ray Dalio
    https://codepen.io/deadzq-the-decoder/pen/qBqQYXg
    Vue 10 test
    vue day2
    codepen学Vue day2
    代理总结更新
  • 原文地址:https://www.cnblogs.com/buyucoder/p/4618638.html
Copyright © 2011-2022 走看看