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 输入框内容格式验证代码
Feb 11 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python更换pip源方法过程解析
2020/05/19 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
房屋转让协议书
2014/04/11 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python正则表达式中flags参数的实例详解
2022/04/01 Python