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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
javascript实现移动端轮播图
Dec 09 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP使用函数用法详解
2018/09/30 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
大学生创业计划书的范文
2014/01/07 职场文书
英语故事演讲稿
2014/04/29 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
神龙架导游词
2015/02/11 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫