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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
js异步接口并发数量控制的方法示例
Nov 22 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面试题集锦
2012/03/08 PHP
PHP排序算法类实例
2015/06/17 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
蛋糕店创业计划书
2014/05/06 职场文书
单位工作证明
2014/10/07 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python