需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。
2、在index.html中的<script>标签，输入js代码：$('#txt').val('测试内容')。
3、浏览器运行index.html页面，此时会发现html中的text被成功用js赋值了“测试内容”的文本。
一、使用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"/>  
<input id="Button3" type="button" value="取消" class="btn"/>
</div>
</div>
"""
<!DOCTYPE HTML><html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<title>tryMyOwnCalendar</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="application/javascript" language="javascript"> </script>
<style>
*{ margin:0 padding:0}
.choosecal{ width:96% margin:3% auto overflow:hidden}
.ccaltop{ width:100% border-radius:5px }
.caltline1,.caltline2{ width:94% background-color:#F90 overflow:hidden padding:2% 3%}
.caltline1 p,.caltline2 p{ float:left width:10% font-weight:700 text-align:right}
.caltline1 .bookdate{ width:90% text-align:left}
.caltline2{ background-color:#FFF display:none}
.caltline2 p{ width:20%}
.caltline2 .datetext{ width:35% border:1px solid #000 background-color:#FFF font-weight:700}
.inputdate{ color:#F60}
.calender{ width:100% margin-top:3% overflow:hidden display:none}
.selectmouth{ background-color:#F30 width:94% overflow:hiddenpadding:2% 3%border-radius:5px 5px 0 0}
.selectmouth p{ float:left width:33% color:#FFF font-weight:700 cursor:pointer}
.selectmouth .selectdate{ width:100% background-color:#F30 border:none color:#FFF font-weight:700 text-align:center}
.data_table{ width:100%border:1px solid #ccccccborder-collapse:collapse }
.data_table thead{ background-color:#333}
.data_table thead td{ color:#FFF text-align:centerborder:1px solid #333border-collapse:collapse padding:1% 0}
.data_table tbody td{border:1px solid #ccccccborder-collapse:collapse text-align:centercolor:#0C6padding:1% 0}
.data_table tbody td.orderdate{ color:#000}
.data_table tbody td.tdselect{ color:#fffbackground-color:#999}
</style>
</head>
<body>
<div class="choosecal">
<div class="ccaltop">
<div class="caltline1">
<p class="bookdate">选择入住日期……</p>
<p><img src="http://js.alixixi.com/demo/CompactNewsPreviewer/images/next.png" /></p>
