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，并编写问题的基本代码。