JQuery es la biblioteca que facilita el uso de JavaScript. La inserción de <input type=’hidden’> también se puede hacer usando jQuery. Las funciones incorporadas append() y appendTo() se pueden usar para agregar el elemento de formulario oculto, pero no solo se limitan a <input type=’hidden’> , sino que también podemos agregar otros elementos html.
Nota: Ambos funcionan prácticamente de la misma manera. La principal diferencia es solo sobre la sintaxis y eso se explica a continuación.
Usando el método appendTo(): En el método appendTo() , el contenido viene antes que el método como $(content).appendTo(selector).
Los siguientes ejemplos ilustran el método appendTo() para crear un elemento de formulario oculto:
Ejemplo 1: si solo se va a agregar un atributo, se puede proporcionar pasando dos argumentos en el método attr() . El primer argumento es el nombre del atributo y el segundo argumento es el valor del atributo.
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks </title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<script>
$(document).ready(function() {
$("<input>").attr("type", "hidden").appendTo("form");
})
</script>
<form>
Name:
<input type="text">
<br> Hidden:
</form>
</body>
</html>
Salida: la salida se puede ver en el navegador usando la función Inspeccionar elemento (por ejemplo, ctrl + shift + i en Google Chrome).
Ejemplo 2: También se pueden proporcionar múltiples atributos pasándolos como un objeto de atributos en el método attr() .
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<script>
$(document).ready(function() {
$("<input>").attr({
name: "hiddenField",
id: "hiddenId",
type: "hidden",
value: 10
}).appendTo("form");
})
</script>
<form>
Name:
<input type="text">
<br> Hidden:
</form>
</body>
</html>
Salida: la salida se puede ver en el navegador usando la función Inspeccionar elemento (por ejemplo, ctrl + shift + i en Google Chrome).
Usando el método append(): En el método append() , el contenido viene después del método como $(selector).append(content) .
El siguiente ejemplo ilustra el método append() para crear un elemento de formulario oculto:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("form").append("<input type='hidden'
name='hidField' value='111'>")
})
</script>
<form>
Name:
<input type="text">
<br> Hidden:
</form>
</body>
</html>
Salida: la salida se puede ver en el navegador utilizando la función Inspeccionar elemento (por ejemplo ctrl + shift + i, en Google Chrome).
Publicación traducida automáticamente
Artículo escrito por AnasShamoon y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA