innerHTML中标签可以换行的方法汇总


Posted in Javascript onAugust 14, 2015

在用innerHTML生成结构时,为了看起来结构明快,可以在每行的末尾加一个反斜线\,即可保持html原结构,而不至于将标签都挤在一块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML中标签可以换行的方法</title>
</head>
<body>
<script>
//function fnNew(){
  var sHtml = '';
  for(var i = 0; i < 2; i++){
    sHtml += '<li class="in">\
          <div class="in-con">\
            <button class="in-btn_s">显示</button>\
            <button class="in-btn_h">隐藏</button>\
          </div>\
          <div class="in-show">第'+ i +'种方法:'+ data[i]+'</div>\
        </li>';   
  }
  oList.innerHTML = sHtml;
}
</script>
</body>
</html>

我是今天才学到十八哥的Javascript 说到innerHMTL 的使用,当时老师说到里面的标签不换行我觉得自己如果以后操作肯定不方便,于是我把这段代码复制出来问了下做过编程的朋友们

function t2(){
    var cont = document.getElementById('container');

    var htmlcode =  "<p><ul><li><span>东</span></li><li>南</li><li>西</li><li>北</li></ul></p>";

    cont.innerHTML = htmlcode;

的下面这段代码可不可以把代码写成可以换行的,

<p><ul><li><span>东</span></li><li>南</li><li>西</li><li>北</li></ul></p>

但是功夫不负有心人,终于有人告诉我方法   见下面代码

var htmlcode = "<p> \
                                   <ul> \
                                         <li><span>东</span></li> \
                                         <li>南</li> \
                                         <li>西</li> \
                                         <li>北</li> \
                                   </ul> \
                             </p>";

也就是每次需要换行的代码就多一个\   实现换行。(没什么特俗技巧,只是个人看起来觉得这样写代码觉得舒服一点)

Javascript 相关文章推荐
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
freemarker判断对象是否为空的方法
Aug 13 #Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 #Javascript
You might like
php实现监听事件
2013/11/06 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
javascript 写类方式之六
2009/07/05 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
最短的IE判断代码
2011/03/13 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python实现K最近邻算法
2018/01/29 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python实现内存监控系统
2021/03/07 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
行政管理专业推荐信
2013/11/02 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
客户答谢会致辞
2015/01/20 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
教师节班会主持词
2015/07/06 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
党章学习心得体会2016
2016/01/14 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL