写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
1、先用document.createElement方法创建一个input元素！
复制代码 代码如下:
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>
分享到：
相关推荐
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下： JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
<!... ; charset=gb2312" /> 无标题文档 function show() { var num1=document.getElementById('num1').value;... <input type="button" value="显示" onclick="show()" /> <div id="showDiv"></div> </html>
本文实例讲述了javascript元素动态创建实现方法。分享给大家供大家参考。具体分析如下： [removed]只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用...
发布时候淡出效果，创建一个li，添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头，这是需要判断一下，当有元素时候采用 insertBefore方法，当没有元素时候采取...
代码过于简洁，就不多说废话了，直接奉上： 代码如下: [removed] ... var obj=document.createElement(“input”); obj.value=”1″; document.body.appendChild(obj); } [removed] <a>add</a>
appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。（移除再添加）。 代码说明 <!DOCTYPE html> <html> <head> <title>appendChild的第二种功能</title&...
本文实例讲述了JavaScript动态添加style节点的方法。分享给大家供大家参考。具体如下： var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement...
Uncaught HierarchyRequestError:Failed to excute ‘appendChild’ on ‘Node’:The new child element contains the parent. 在谷歌浏览器上： SCRIPT5022:DOM Exception:HIERARCHY_REQUEST_ERR(3) error 2、错误...
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考，具体如下： 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option(...
(1)最开始，想到原生JavaScript，jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定，原生javascript没法控制。 (2)上网查资料，找到$compile服务，动态改变html内容。本...
* appendChild()：向 childNodes 列表的末尾添加一个节点 * insertBefore()：在指定的参照节点之前插入一个节点 * replaceChild()：将一个节点替换为另一个节点 * removeChild()：移除一个节点 * cloneNode()：克隆...
JavaScript 转换字符串为 DOM 对象（字符串动态创建 DOM） 在 JavaScript 中，动态创建标准的 DOM 对象通常使用 `var obj = document.createElement('div');`，然后再给 `obj` 设置一些属性。但是，在实际使用过程...
"用javascript实现鼠标框选" 本文将介绍如何使用javascript实现鼠标框选功能。鼠标框选是一种常见的交互方式，用户通过鼠标拖曳的方式在屏幕上绘制一个矩形区域，以便选择某个特定的区域。下面我们将详细介绍如何...
用js创建动态表格一些基本语法 avascript 动态创建表格：新增、删除行和单元格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。
添加CSS的方式有行内式、嵌入式、外链式、导入式 a)动态引入样式表文件： 代码如下: function loadLink(url){ var link = document.createElement(“link”); link.type = “text/css”; link.rel = “stylesheet”;...
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指...JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...