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 相关文章推荐
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue+mock.js实现前后端分离
Jul 24 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 验证码制作(网树注释思想)
2009/07/20 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python实现查询IP地址所在地
2015/03/29 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python3爬虫学习入门教程
2018/12/11 Python
python面向对象法实现图书管理系统
2019/04/19 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
html5时钟实现代码
2010/10/22 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
如何提高MySql的安全性
2014/06/19 面试题
机械加工与数控专业自荐书
2014/06/04 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
钱学森观后感
2015/06/04 职场文书
贫困生证明范文
2015/06/16 职场文书
《打电话》教学反思
2016/02/22 职场文书