拼接html片段的快捷方式

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

第一种方法: 采用数组的方式. 最后利用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代码了

最后

以上就是隐形西牛为你收集整理的拼接html片段的快捷方式的全部内容，希望文章能够帮你解决拼接html片段的快捷方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。