开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
查看: 7578|回复: 2

innerHTML中标签可以换行的方法汇总[javascript教程]

[复制链接]

该用户从未签到

156

主题

156

帖子

2万

豆豆

超级版主

光头春 发表于 2018-5-12 09:40:18 | 显示全部楼层 |阅读模式

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

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


其它思必达学院教程推荐:
3天学会UI图标设计--UI设计教程
18天玩转Photoshop CS6 (价值400元高清无水印)
《微软院校认证课程系列教材-网络基础架构的实现和管理》(MCP/MCS)MCP[ISO]
《网路工程师参考书》 资料下载
《一学就会魔法书-五笔字型》
《电脑急救》扫描版[PDF]
《五笔字型魔鬼训练法:五天突破1分钟100字》[PDF ]
《oeasy教你玩转电脑系列之audition》[RMVB]
《Windows驱动开发技术详解(pdf书+源代码)》[压缩包]
《打印机原理与维修》[RMVB]
回复

使用道具 举报

  • TA的每日心情

    2018-5-17 17:34
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    2

    帖子

    4

    豆豆

    普通小白

    135 发表于 2018-5-17 17:33:23 | 显示全部楼层
    了呵呵哈哈哈哈
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2018-6-14 07:51
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    4

    主题

    47

    帖子

    1100

    豆豆

    付费小白

    qicaiyuwu 发表于 2018-6-6 11:15:54 | 显示全部楼层
    支持下                                             
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

    小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

    快速回复 返回顶部 返回列表
    世界未解之谜大全 网上兼职招聘信息 南宁大学生兼职网