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 相关文章推荐
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
浅析JavaScript中的变量提升
Jun 01 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
Jquery中删除元素的实现代码
2011/12/29 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python中update的基本使用方法详解
2019/07/17 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
农村门前三包责任书
2014/07/25 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
给医院的感谢信
2015/01/21 职场文书
诚实守信主题班会
2015/08/13 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
中学音乐课教学反思
2016/02/18 职场文书
python glom模块的使用简介
2021/04/13 Python