如何使用 jQuery 动态创建隐藏的表单元素？

JQuery 是使 JavaScript 的使用变得容易的库。插入也可以使用 jQuery 来完成。 append()和appendTo()内置函数可用于添加隐藏的表单元素，但它们不仅限于 ，我们还可以添加其他 html 元素。

注意：它们的性能几乎相同。主要区别仅在于语法，下面将对此进行解释。

使用 appendTo() 方法：在appendTo()方法中，内容出现在方法之前，如$(content).appendTo(selector) 。

下面的例子说明了appendTo()方法来创建隐藏的表单元素：

示例 1：如果只添加一个属性，则可以通过在attr()方法中传递两个参数来给出。第一个参数是属性的名称，第二个参数是属性的值。

  

  

    GeeksforGeeks 
  
    
    

  

    
        $(document).ready(function() {
            $("<input>").attr("type", "hidden").appendTo("form");
        })
    
  
    
  
        Name:
        
         Hidden:
  
    
  

  

输出：可以使用Inspect Element功能在浏览器中查看输出（例如 Google Chrome 中的ctrl + shift + i ）。

示例 2：也可以通过在attr()方法中将多个属性作为属性对象传递来给出多个属性。

  

    GeeksforGeeks
  
    
    
  

  

    
        $(document).ready(function() {
            $("<input>").attr({
                name: "hiddenField",
                id: "hiddenId",
                type: "hidden",
                value: 10
            }).appendTo("form");
  
        })
    
  
    
  
        Name:
        
         Hidden:
  
    
  

  

输出：可以使用Inspect Element功能在浏览器中查看输出（例如 Google Chrome 中的ctrl + shift + i ）。

使用 append() 方法：在append()方法中，内容在$(selector).append(content)类的方法之后。

下面的例子说明了append()方法来创建隐藏的表单元素：

例子：

  

  

    GeeksforGeeks
  
    
  

  

    
        $(document).ready(function() {
            $("form").append("<input type='hidden'
                    name='hidField' value='111'>")
        })
    
  
    
  
        Name:
        
         Hidden:
  
    
  

  

输出：可以使用Inspect Element功能在浏览器中查看输出（例如 Google Chrome 中的ctrl + shift + i ）。