快捷導(dǎo)航

innerHTML中標(biāo)簽可以換行的方法匯總

更新時(shí)間：2015年08月14日 10:08:56 投稿：hebedich

本文給大家分享的是一個(gè)在javascript中使用innerhtml輸出的時(shí)候如何實(shí)現(xiàn)換行的小技巧，其實(shí)很簡(jiǎn)單，在需要換行的地方加上\即可

在用innerHTML生成結(jié)構(gòu)時(shí)，為了看起來(lái)結(jié)構(gòu)明快，可以在每行的末尾加一個(gè)反斜線\，即可保持html原結(jié)構(gòu)，而不至于將標(biāo)簽都擠在一塊

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML中標(biāo)簽可以換行的方法</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>

我是今天才學(xué)到十八哥的Javascript 說(shuō)到innerHMTL 的使用，當(dāng)時(shí)老師說(shuō)到里面的標(biāo)簽不換行我覺(jué)得自己如果以后操作肯定不方便，于是我把這段代碼復(fù)制出來(lái)問(wèn)了下做過(guò)編程的朋友們

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;

的下面這段代碼可不可以把代碼寫(xiě)成可以換行的，

<p><ul><li><span>東</span></li><li>南</li><li>西</li><li>北</li></ul></p>

但是功夫不負(fù)有心人，終于有人告訴我方法見(jiàn)下面代碼

var htmlcode = "<p> \
                                   <ul> \
                                         <li><span>東</span></li> \
                                         <li>南</li> \
                                         <li>西</li> \
                                         <li>北</li> \
                                   </ul> \
                             </p>";

也就是每次需要換行的代碼就多一個(gè)\ 實(shí)現(xiàn)換行。（沒(méi)什么特俗技巧，只是個(gè)人看起來(lái)覺(jué)得這樣寫(xiě)代碼覺(jué)得舒服一點(diǎn)）

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖的兩種方式，一是構(gòu)造函數(shù)、另一種是面向?qū)ο蠓绞椒绞剑哂幸欢ǖ膮⒖純r(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
利用JS實(shí)現(xiàn)數(shù)字增長(zhǎng)
做項(xiàng)目時(shí)候常常遇到，要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長(zhǎng)效果，一起來(lái)跟本文學(xué)習(xí)學(xué)習(xí)。
2016-07-07
用腳本調(diào)用樣式的幾種方法
用腳本調(diào)用樣式的幾種方法...
2006-12-12
js從輸入框讀取內(nèi)容,比較兩個(gè)數(shù)字的大小方法
下面小編就為大家?guī)?lái)一篇js從輸入框讀取內(nèi)容,比較兩個(gè)數(shù)字的大小方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
JavaScript中關(guān)于遞歸與回溯的實(shí)例詳解
這篇文章主要將為大家介紹一下JavaScript中遞歸與回溯的原理及使用，文中通過(guò)一些例題進(jìn)行了詳細(xì)介紹，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-07-07
js瀏覽器html5表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js瀏覽器html5表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
js仿小米二級(jí)菜單顯示效果
這篇文章主要為大家詳細(xì)介紹了js仿小米二級(jí)菜單顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
js 轉(zhuǎn)義字符及URI編碼詳解
本文主要介紹了轉(zhuǎn)義字符及URI編碼的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
js通過(guò)audioContext實(shí)現(xiàn)3D音效
這篇文章主要為大家詳細(xì)介紹了js通過(guò)audioContext實(shí)現(xiàn)3D音效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
關(guān)于var在for循環(huán)遇到的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于var在for循環(huán)遇到的問(wèn)題的幾種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07