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> 
  • 相关阅读:
    一:多线程--多线程简单介绍
    五:网络--多线程断点下载
    四:网络--NSURLConnection基本使用
    三:网络--数据安全/加密
    二:网络--GET请求和POST请求
    一:网络--HTTP协议
    源代码管理工具GIT
    MyBatis 多参问题
    jquery 事件
    jquery点击事件
  • 原文地址:https://www.cnblogs.com/firstdream/p/4518879.html
Copyright © 2011-2022 走看看