javascript实现的动态添加表单元素input,button等(appendChild)
JavaScript 实现 添加 动态 元素 表单 input button
2023-09-11 14:19:24 时间
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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>
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
我想各位在很多网站上都看到过类似的效果!
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>
我想各位在很多网站上都看到过类似的效果!
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>
相关文章
- JavaScript window.open()属性
- JavaScript实现鼠标放上去之后高亮显示且隔行换色
- JavaScript实现鼠标放上去之后高亮显示且隔行换色
- JavaScript实现四则运算
- Javascript aop(面向切面编程)之around(环绕)
- [Javascript] Compose multiple functions for new behavior in JavaScript
- javascript中关于坐标 大小 的描述
- [Javascript] Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops
- [Functional Programming] Use a Javascript Array to Construct a Maybe
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] JavaScript赋值时的传值与传址
- 通过 SAP UI5 ODataModel API 在 JavaScript 代码里访问 OData 元数据试读版
- ABAP,Java,JavaScript里的字符串模板String Template
- 80行JavaScript代码实现的贪食蛇游戏,简约之美
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
- SAP产品和3D渲染技术的结合-使用JavaScript的开源3D渲染库实现
- css和JavaScript实现的星云动画效果
- 力扣——831. 隐藏个人信息(Java、JavaScript、python3实现耗时最短)
- Javascript 严格模式下不允许删除一个不允许删除的属性
- 【阅读笔记】你不知道的Javascript--作用域与闭包1
- web前端框架Javascript开发基础之JavaScript作用域