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使用手册之 事件处理
Mar 24 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
js实现自定义滚动条的示例
Oct 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
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Python实现的选择排序算法示例
2017/11/29 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
django中静态文件配置static的方法
2018/05/20 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
利用python实现逐步回归
2020/02/24 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
大二学生职业生涯规划书
2014/02/05 职场文书
小班秋游活动方案
2014/02/22 职场文书
销售经理岗位职责
2014/03/16 职场文书
新年主持词
2014/03/27 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
教务处干事工作总结
2015/08/14 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技