复制代码 代码如下:
var newInput = document.createElement("input")
2、设定相关属性，如name,type等
复制代码 代码如下:
newInput.type=mytype
newInput.name="input1"
3、用appendChild方法,将元素追加到某个标签内容中！
复制代码 代码如下:
TemO.appendChild(newInput)
Javascrip核心代码：
复制代码 代码如下:
<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")//创建一个BR标签是为能够换行！
TemO.appendChild(newline)
}
</script>
完整代码如下：
<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>
首先，把CSS和JS标签style属性对照表了解了：CSS 和 JavaScript 标签 style 属性对照表：
盒子标签和属性对照
CSS语法（不区分大小写） JavaScript语法（区分大小写）
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-colorborderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-styleborderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-widthborderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-rightmarginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-leftpaddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
background background
background-attachment backgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
样式标签和属性对照
CSS语法（不区分大小写） JavaScript 语法（区分大小写）
display display
list-style-type listStyleType
list-style-imagelistStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字样式标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
fontfont
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variantfontVariant
font-weight fontWeight
文本标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justifytextJustify
text-transform textTransform
vertical-align verticalAlign
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
</HEAD>
<script language="javascript">
function validate(){
if (document.all("name").value == ""){
document.all("name").style["borderColor"]="red"//就是这里
return
}
}
</script>
<BODY>
<input type="text" name="name" >
</BODY>
</HTML>
这样：
<body>
<form id='form'> --定义form
</form>
<script>
var input = document.createElement('input') //创建input节点
input.setAttribute('type', 'text') //定义类型是文本输入
document.getElementById('form').appendChild(input ) //添加到form中显示
</script>
</body>
扩展资料：注意事项
一、form属性可以使input标签不再form表单内时也属于form表单中的一部分
<form action="xxx" id="forms">
<input type="submit" value="提交">
</form>
<input type="text" form="forms" name="names">
<!-- IE中不支持这个属性 -->
二、JavaScript提交表单时，可以在input标签内添加required属性，在内容为空的时候阻止表单提交。
使用required属性时添加oninvalid属性可以自定义提示文字
<form action="xxx" method="post">
<input type="text" name="fname" required oninvalid="setCustomValidity('不能为空')">
<input type="submit" value="提交">
</form>
<!-- IE9及更早版本不支持 -->
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）