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实现选项卡的特别效果的实例
Mar 03 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
js基于canvas实现时钟组件
Feb 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP中ADODB类详解
2008/03/25 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
幼教简历自我评价
2014/01/28 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
博士生专家推荐信
2015/03/25 职场文书
博士论文答辩开场白
2015/06/01 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
任命书格式范文
2015/09/22 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript