`
jia106329
  • 浏览: 60623 次
  • 性别: Icon_minigender_2
  • 来自: tj
社区版块
存档分类
最新评论

javascript实现的动态添加表单元素input,button等(appendChild)

    博客分类:
  • js
阅读更多
http://www.jb51.net/article/12856.htm


<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实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下: JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...

    JavaScript table 动态添加行,列

    &lt;!... ; charset=gb2312" /&gt; 无标题文档 function show() { var num1=document.getElementById('num1').value;... &lt;input type="button" value="显示" onclick="show()" /&gt; &lt;div id="showDiv"&gt;&lt;/div&gt; &lt;/html&gt;

    javascript元素动态创建实现方法

    本文实例讲述了javascript元素动态创建实现方法。分享给大家供大家参考。具体分析如下: [removed]只能在页面加载过程中才能动态创建 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用...

    原生JavaScript实现的全特效微博发布面板效果实例源码.zip

    发布时候淡出效果,创建一个li,添加li的时候 不能直接采用 appendChild,这回直接添加到已有元素的后边,而微博效果是插入到前头,这是需要判断一下,当有元素时候采用 insertBefore方法,当没有元素时候采取...

    js实现点击添加一个input节点

    代码过于简洁,就不多说废话了,直接奉上: 代码如下: [removed] ... var obj=document.createElement(“input”);  obj.value=”1″;  document.body.appendChild(obj);  }  [removed] &lt;a&gt;add&lt;/a&gt;

    详解javascript appendChild()的完整功能

    appendChild的另一个功能是,先把元素从原有父级上删掉,然后添加元素到新的父级。(移除再添加)。 代码说明 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;appendChild的第二种功能&lt;/title&...

    JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法。分享给大家供大家参考。具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement...

    JavaScript利用append添加元素报错的解决方法

    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追加节点实例

    主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下

    javascript与jquery动态创建html元素示例

    本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考,具体如下: 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option(...

    Angularjs 实现动态添加控件功能

    (1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定,原生javascript没法控制。 (2)上网查资料,找到$compile服务,动态改变html内容。本...

    javascript_动态创建表格

    用js创建动态表格一些基本语法 avascript 动态创建表格:新增、删除行和单元格 利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。

    javascript动态添加样式(行内式/嵌入式/外链式等规则)

    添加CSS的方式有行内式、嵌入式、外链式、导入式 a)动态引入样式表文件: 代码如下: function loadLink(url){ var link = document.createElement(“link”); link.type = “text/css”; link.rel = “stylesheet”;...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...

    javascript appendChild,innerHTML,join性能比较代码

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... &lt;head&gt; &lt;title&gt;appendChild,innerHTML,join&lt;/title&gt; [removed]&lt;...– //使用appendChild()方法添加span标签 function AppendD

    JavaScript HTML DOM元素 节点操作汇总

    前言 在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 ...语法:appendChild(newnode) eg: 这是一个段落 这是另一个段落 &lt;/div&gt;

    JavaScript HTML DOM 元素 (节点)

    JavaScript HTML DOM 元素 (节点) 本章节介绍如何向文档中添加和移除元素(节点)。 创建新的 HTML 元素 (节点) – appendChild() 要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。 ...

Global site tag (gtag.js) - Google Analytics