脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → innerHTML中标签可以换行的方法汇总

innerHTML中标签可以换行的方法汇总

 更新时间：2015年08月14日 10:08:56   投稿：hebedich  
本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，其实很简单，在需要换行的地方加上\即可

在用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>";

也就是每次需要换行的代码就多一个\   实现换行。（没什么特俗技巧，只是个人看起来觉得这样写代码觉得舒服一点）

您可能感兴趣的文章:

相关文章

  • js实现轮播图的两种方式(构造函数、面向对象)

    js实现轮播图的两种方式(构造函数、面向对象)

    这篇文章主要为大家详细介绍了js实现轮播图的两种方式，一是构造函数、另一种是面向对象方式方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 利用JS实现数字增长

    利用JS实现数字增长

    做项目时候常常遇到，要做一个数字滚动增加的效果。如何利用JavaScript实现数字增长效果，一起来跟本文学习学习。
    2016-07-07
  • 用脚本调用样式的几种方法

    用脚本调用样式的几种方法

    用脚本调用样式的几种方法...
    2006-12-12
  • js从输入框读取内容,比较两个数字的大小方法

    js从输入框读取内容,比较两个数字的大小方法

    下面小编就为大家带来一篇js从输入框读取内容,比较两个数字的大小方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JavaScript中关于递归与回溯的实例详解

    JavaScript中关于递归与回溯的实例详解

    这篇文章主要将为大家介绍一下JavaScript中递归与回溯的原理及使用，文中通过一些例题进行了详细介绍，感兴趣的小伙伴可以跟随小编一起学习一下
    2022-07-07
  • js浏览器html5表单验证

    js浏览器html5表单验证

    这篇文章主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • js仿小米二级菜单显示效果

    js仿小米二级菜单显示效果

    这篇文章主要为大家详细介绍了js仿小米二级菜单显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • js 转义字符及URI编码详解

    js 转义字符及URI编码详解

    本文主要介绍了转义字符及URI编码的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js通过audioContext实现3D音效

    js通过audioContext实现3D音效

    这篇文章主要为大家详细介绍了js通过audioContext实现3D音效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 关于var在for循环遇到的问题解决

    关于var在for循环遇到的问题解决

    这篇文章主要给大家介绍了关于var在for循环遇到的问题的几种解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07

最新评论