當前位置:編程學習大全網 - 編程軟體 - 如何優雅的用js動態的添加html代碼

如何優雅的用js動態的添加html代碼

壹、使用javascript 模板引擎

用javascript預編譯模版,就是動態修改模板文件使之成為壹個可用的靜態HTML文件。 我平時會使用artTemplate,性能很好而且易上手。

編寫模板

使用壹個type="text/html"的script標簽存放模板:

<script?id="test"?type="text/html">

<h1>{{title}}</h1>

<ul>

{{each?list?as?value?i}}

<li>索引?{{i?+?1}}?:{{value}}</li>

{{/each}}

</ul>

</script>

渲染模板

var?data?=?{

title:?'標簽',

list:?['文藝',?'博客',?'攝影',?'電影',?'民謠',?'旅行',?'吉他']

};

var?html?=?template('test',?data);

document.getElementById('content').innerHTML?=?html;

二、使用CoffeeScript

CoffeeScript支持類似於Python的跨行字符串,這樣很輕易的就能保持HTML結構的可讀性,而不需要使用“+”或者采用拼數組的形式。

str="""

<div?class="dialog">

<div?class="title">

<img?src="close.gif"?alt="關閉"?/>關閉

</div>

<div?class="content">

<img?src="delete.jpg"?alt=""?/>

</div>

<div?class="bottom">

<input?id="Button2"?type="button"?value="確定"?class="btn"/>&nbsp;&nbsp;

<input?id="Button3"?type="button"?value="取消"?class="btn"/>

</div>

</div>

"""

  • 上一篇:MOV是什麽格式?
  • 下一篇:戰地5手雷怎麽拿出來
  • copyright 2024編程學習大全網