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> 
  • 相关阅读:
    Oracle的连接时ORA-12519错误
    MongoDB(4.4)使用
    MongoDB安装
    SpringBoot_加密配置中的敏感信息
    SpringBoot_配置文件详解
    Nginx入门
    SpringBoot+Redis集成简单测试
    Redis安装
    RabbitMQ消息中间件(第四章)第四部分-SpringBoot整合RabbitMQ
    Mysql try restarting transaction怎么解决,排查事务锁表
  • 原文地址:https://www.cnblogs.com/firstdream/p/4518879.html
Copyright © 2011-2022 走看看