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 格式字符串的应用
Mar 29 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
fgetcvs在linux的问题
2012/01/15 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
php post换行的方法
2020/02/03 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
js实现二级导航功能
2017/03/03 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
Python对字符串实现去重操作的方法示例
2017/08/11 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
flask中过滤器的使用详解
2018/08/01 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
升学宴主持词
2014/04/02 职场文书
小学家长学校培训材料
2014/08/24 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS