js動態循環寫html代碼

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

一、使用javascript 模板引擎

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

編寫模板

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

<scriptid="test"type="text/html">
<h1>{{title}}</h1>
<ul>
{{eachlistasvaluei}}
<li>索引{{i+1}}：{{value}}</li>
{{/each}}
</ul>
</script>

渲染模板

vardata={
title:'標簽',
list:['文藝','博客','攝影','電影','民謠','旅行','吉他']
};
varhtml=template('test',data);
document.getElementById('content').innerHTML=html;

二、使用CoffeeScript

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

str="""
<divclass="dialog">
<divclass="title">
<imgsrc="close.gif"alt="關閉"/>關閉
</div>
<divclass="content">
<imgsrc="delete.jpg"alt=""/>
</div>
<divclass="bottom">
<inputid="Button2"type="button"value="確定"class="btn"/>&nbsp;&nbsp;
<inputid="Button3"type="button"value="取消"class="btn"/>
</div>
</div>
"""

⑵ 用js和html動態生成n行n列表格

html部分：專

<inputtype="text"id=""/>
<inputtype="submit"onclick="getvalue();"value="提交"/>

js部分：

<script>

	functiongetvalue(){
		屬var=document.getElementById("").value;

		document.write("<table>");
			
			for(i=0;i<;i++){
				document.write("<tr>");
					for(x=0;x<;x++){
						document.write("<td>"+x+"</td>");
					}
				document.write("</tr>");
			}
		
		document.write("</table>");
	};

	
</script>

這實現了輸入數字n，即生成n行n列的表格。

⑶ js中的for循環輸出，怎麼輸出到html中的指定位置 循環li

准備的材料有：計算機、瀏覽器、html編輯器。

一、首先，打開html編輯器，創建一個新的html文件，比如index.html，並編寫問題的基本代碼。