zoukankan      html  css  js  c++  java
  • javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程!
    我想各位在很多网站上都看到过类似的效果!
    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> 
  • 相关阅读:
    OAuth2.0认证和授权原理
    APNs详细使用步骤
    解决IDEA因分配内存而引起的卡顿
    JAVA 第二周学习总结
    JAVA 第一周学习总结
    Mac OS 上配置java开发环境
    【DP】【单调队列】洛谷 P2216 [HAOI2007]理想的正方形 题解
    【DP】【构造】NOIp模拟题 演讲 题解
    【2-SAT】【并查集】NOIp模拟题 植树方案 题解
    【字符串】【hash】【倍增】洛谷 P3502 [POI2010]CHO-Hamsters 题解
  • 原文地址:https://www.cnblogs.com/firstdream/p/4518879.html
Copyright © 2011-2022 走看看