拼接html片段的快捷方式

之前一直用 "" + "" 这种方式来拼接一个很长的字符串 或者 HTML 代码, 太累了. 那有没有什么好的方法了, 起码敲起代码起来不会感觉到厌烦, 于是我总结了2种比较舒服的方法, 望大家采纳.

第一种方法: 采用数组的方式. 最后利用join('')连接起来. 直接上代码.

Js

<script>  
       var lang = {
             url : 'http://www.dianziq.com',
             upload : 'ABCD',
             viewServer : 'viewServer',
             width : 100 ,
             height : 100
       } ,

       var html = [
             '<div style="padding:20px;">' ,
             //url
             '<div class="ke-dialog-row">' ,
             '<label for="keUrl" style="width:60px;">' + lang.url + '</label>',
             '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> &nbsp;',
             '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;',
             '<span class="ke-button-common ke-button-outer">',
             '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
             '</span>',
             '</div>',
             //width
             '<div class="ke-dialog-row">' ,
             '<label for="keWidth" style="width:60px;">' + lang.width + '</label>',
             '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" /> ',
             '</div>',
             //height
             '<div class="ke-dialog-row">' ,
             '<label for="keHeight" style="width:60px;">' + lang.height + '</label>',
             '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" /> ',
             '</div>',
             '</div>'
       ].join ('');
</script>  

第二种方法: 采用"\"连接的方法

Js

<script>  
 var lang = {
             url : 'http://www.dianziq.com',
             upload : 'ABCD',
             viewServer : 'viewServer',
             width : 100 ,
             height : 100
       } ,

 var html2 = '\
            <div style="padding:20px;">\
            <div class="ke-dialog-row">\
            <label for="keUrl" style="width:60px;">' + lang.url + '</label>\
            <input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:160px;" /> &nbsp;\
            <input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;\
            <span class="ke-button-common ke-button-outer">\
            <input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />\
            </span>\
            </div>\
            <div class="ke-dialog-row">\
            <label for="keWidth" style="width:60px;">' + lang.width + '</label>\
            <input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" />\
            </div>\
            <div class="ke-dialog-row">\
            <label for="keHeight" style="width:60px;">' + lang.height + '</label>\
            <input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" />\
            </div>\
            </div>\
            ' ;
 </script>

这样子我们就可以在JS里面直接写HTML代码了