给你个例子参考
<html>
<head>
<title>
</title>
<style type="text/css">
*{
margin:0padding:0
}
.STYLE1
</style>
</head>
<body>
<div class="cecmbody" id="cecmpolicy">
<div class="leftClass">
<input type="button" value="点击这里" onclick="sAlert('我是一个渐变的sAlert',this)" />
</p>
<p>测试</p><p>测试</p><p>测试</p><p>测试</p>
</div>
<div class="rightClass">
</div>
</div>
<script type="text/javascript" language="javascript">
function sAlert(txt){
var eSrc=(document.all)?window.event.srcElement:arguments[1]
var shield = document.createElement("DIV")
shield.id = "shield"
shield.style.position = "absolute"
shield.style.left = "0px"
shield.style.top = "0px"
shield.style.width = "100%"
shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px"
shield.style.background = "#333"
shield.style.textAlign = "center"
shield.style.zIndex = "10000"
shield.style.filter = "alpha(opacity=0)"
shield.style.opacity = 0
var alertFram = document.createElement("DIV")
alertFram.id="alertFram"
alertFram.style.position = "absolute"
alertFram.style.left = "50%"
alertFram.style.top = "50%"
alertFram.style.marginLeft = "-225px"
alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px"
alertFram.style.width = "450px"
alertFram.style.height = "150px"
alertFram.style.background = "#ccc"
alertFram.style.textAlign = "center"
alertFram.style.lineHeight = "150px"
alertFram.style.zIndex = "10001"
strHtml = "<ul style=\"list-style:nonemargin:0pxpadding:0pxwidth:100%\">\n"
strHtml += " <li style=\"background:#DD828Dtext-align:leftpadding-left:20pxfont-size:14pxfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\">[系统提示]</li>\n"
strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\">"+txt+"</li>\n"
strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\"><input type=\"text\" value=\"确 定\" /></li>\n"
strHtml += " <li style=\"background:#FDEEF4text-align:centerfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n"
strHtml += "</ul>\n"
alertFram.innerHTML = strHtml
document.body.appendChild(alertFram)
document.body.appendChild(shield)
this.setOpacity = function(obj,opacity){
if(opacity>=1)opacity=opacity/100
trycatch(e){}
try{
if(obj.filters.length>0&&obj.filters("alpha")){
obj.filters("alpha").opacity=opacity*100
}else{
obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")"
}
}catch(e){}
}
var c = 0
this.doAlpha = function(){
if (++c >20)
setOpacity(shield,c)
}
var ad = setInterval("doAlpha()",1)
this.doOk = function(){
//alertFram.style.display = "none"
//shield.style.display = "none"
document.body.removeChild(alertFram)
document.body.removeChild(shield)
eSrc.focus()
document.body.onselectstart = function()
document.body.oncontextmenu = function()
}
document.getElementById("do_OK").focus()
eSrc.blur()
document.body.onselectstart = function()
document.body.oncontextmenu = function()
}
</script>
</body>
</html>
1、先用document.createElement方法创建一个input元素！ var newInput = document.createElement("input")
2、设定相关属性，如name,type等
newInput.type=mytype
newInput.name="input1"
3、用appendChild方法,将元素追加到某个标签内容中！
TemO.appendChild(newInput)
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add")
var newInput = document.createElement("input")
newInput.type=mytype
newInput.name="input1"
TemO.appendChild(newInput)
var newline= document.createElement("br")
TemO.appendChild(newline)
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield">
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>
运行效果：
一、在视图模板（View Template）中使用在表达式中应用Filters （过滤器）
需要遵循格式如下：
{{ expression | filter }}即 {{ 表达式 | 过滤器 }}
例如：{{ 12 | currency }} 输出为$12.00在输出结果中应用Filters （过滤器）
通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源.
需要遵循格式如下：
{{ expression | filter1 | filter2 | ... }} 即 表达式(expression)使用filter1过滤后再使用filter2过滤...
带参数的Filter
Filter后面可以跟一个或多个参数，用来帮助实现特殊要求、需求的filter.
需要遵循格式如下：
{{ expression | filter:argument1:argument2:... }}
示例： {{ 1234 | number:2 }} = 1,234.00END
二、使用 AngluarJS 内置Filter
AngularJS为我们提供了9个内建的过滤器
分别是currency, date, filter, json, limitTo, uppercase， lowercase, number, orderBy。
具体的用法在AngularJS的文档中都有详细说明。下面只说几个常用的。
currency filter（货币过滤器)
currency – 用来将变量转换成货币表现形式
如：{{ amount | currency}}
uppercase/lowercase filter（字母大小写filter）如：
{{ "lower cap string" | uppercase }}
<input ng-model="userInput">Uppercased: {{ userInput | uppercase }}
date filter (日期filter)
如：
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
json filter
如：
{{ {foo: "bar", baz: 23} | json }}
END
在controllers， services和drictives中使用filter1可以在AngularJS的controller, service或者driective中使用filter, 这时候你需要将依赖的filter名字加入到controller, service或者directive的依赖中去。
2在controller中直接使用filter， 这样controller可以根据自身需要而适时调用filterEND
三、自定义filter（过滤器）
1AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像，一定记得它返回一个对象或者是一个函数即可，编写的时候，只需要一个带有一个以上参数的函数即可。
2格式大致如：
app.filter('filter(过滤器)名称',function(){return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){//...执行业务逻辑代码return 处理后的对象
}
})
