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
Aug 13 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
Bootstrap基础学习
2015/06/16 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
vue引入jq插件的实例讲解
2017/09/12 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python类class参数self原理解析
2020/11/19 Python
python 实现控制鼠标键盘
2020/11/27 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
车辆转让协议书
2014/09/24 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Java实现二分搜索树的示例代码
2022/03/17 Java/Android