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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
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
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
工艺工程师工作职责
2013/11/23 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
文化大革命观后感
2015/06/17 职场文书
合理化建议书范文
2015/09/14 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python