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 相关文章推荐
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
Javascript动画效果(2)
Oct 11 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 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通用分页类page.php[仿google分页]
2008/08/31 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python定时器实例代码
2017/11/01 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python实现决策树
2017/12/21 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
美国在线宠物商店:Chewy
2019/01/12 全球购物
天地会口号
2014/06/17 职场文书
出生医学证明书
2014/09/15 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015新学期家长寄语
2015/02/26 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
python保存图片的四个常用方法
2022/02/28 Python