拼接html的好方法

最新推荐文章于 2023-09-20 12:50:46 发布

weixin_33774308

最新推荐文章于 2023-09-20 12:50:46 发布

阅读量317

点赞数

原文链接：https://my.oschina.net/vernon/blog/169265

版权

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

<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>

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

<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代码了.

转载于:https://my.oschina.net/vernon/blog/169265