En este artículo, vamos a discutir las diferencias entre los métodos html(), text() y val() y su uso.
1. Método jQuery html() : El método html() se usa para establecer o devolver el HTML interno de un elemento seleccionado. Funciona de manera similar a innerHTML en JavaScript normal para establecer u obtener el contenido del elemento seleccionado. El código anterior muestra la similitud entre el método jQuery html() y JavaScript innerHTML . Cuando ejecuta este código, el HTML interno de div con id « demo» se cambia con «hello Geeks» y después de 2 segundos, la API de jquery hace un trabajo similar al de JavaScript. Cambiará el HTML interno de «hola Geeks» a «bienvenidos a geeksforgeeks».
Sintaxis:
- $().html(): Devuelve el html interno del elemento seleccionado como una string
- $().html(‘cualquier string’): Establece el html interno del elemento seleccionado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="border: 2px solid green;
min-height: 250px;">
<div style="display: flex;
justify-content: center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
</div>
<div id="demo" style="display: flex;
justify-content: center;">
</div>
<script>
document.getElementById('demo').innerHTML
= '<h3>hello Geeks</h3>';
// After 2 sec this code will executed
setTimeout(function () {
$('#demo').html(
'<h3>Welcome to geeksforgeeks</h3>');
}, 2000);
</script>
</body>
</html>
Producción:
la salida del ejemplo
2. Método text() : El método jQuery text() se usa para establecer u obtener el texto interno del elemento seleccionado. Funciona de manera similar a innerText en JavaScript normal para establecer u obtener el contenido del elemento seleccionado.
El siguiente código muestra la similitud entre el método jQuery text() y JavaScript innerText. Cuando ejecuta el código, al comienzo del texto interno de div con id «demo» se cambia con «hola geeks». Después de 2 segundos, cambia a «bienvenido a geeksforgeeks» y luego, al final, después de 4 segundos, el texto interno cambia a «bienvenido a geeksforgeeks».
Sintaxis:
- $().text(): Devuelve el texto interno del elemento seleccionado y el tipo de retorno es una string.
- $().text(‘cualquier string’): Establece el texto interno del elemento seleccionado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="border:2px solid green;
min-height:250px;">
<div style="display:flex;
justify-content:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
</div>
<div id="demo" style="display:flex;
justify-content:center;">
</div>
<script>
document.getElementById('demo').innerText
= 'hello Geeks';
// Code run after 2 sec
setTimeout(function () {
$('#demo').text(
'<h3>Welcome to geeksforgeeks</h3>');
}, 2000);
// Code run after 4 sec
setTimeout(function () {
$('#demo').text('Welcome to geeksforgeeks');
}, 4000);
</script>
</body>
</html>
Producción:
la salida del ejemplo-2
3. Método val() : este método solo es válido para los elementos de entrada como (ingresar con tipo de texto, contraseña, palabra, seleccionar, casilla de verificación) para obtener y establecer el valor. Este método actúa de manera similar como una variable de valor de JavaScript.
Sintaxis:
- $().val(): Devuelve el valor de los campos de entrada.
- $().val(‘cualquier string’): Establece el valor de la entrada.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body style="border:2px solid green;
min-height:250px;">
<div style="display:flex;
justify-content:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
</div>
<div id="demo" style="display:flex;
justify-content:center;">
<input type="text" id="name">
</div>
<script>
document.getElementById('name').value = "Jhon Doe";
// Run after 2 sec
setTimeout(function () {
alert($('#name').val());
$('#name').val('Hello');
}, 2000);
</script>
</body>
</html>
Producción:
la salida del ejemplo-3
Explicación: En este ejemplo al principio, el valor del campo de entrada se cambia con la API de JavaScript y luego, después de 2 segundos, el valor del campo de entrada se muestra en un mensaje de alerta usando el método jQuery val() que devuelve el valor de el campo de entrada cambió por la API de JavaScript y también cambió el campo de entrada usando el método jQuery val() .
Diferencia entre y Usos de las funciones Html(),Text() y Val() en JQuery.
| SI. NO. | metodo html | método de texto | método val() |
|---|---|---|---|
| 1 | Solo puede tomar un parámetro como argumento. | Solo puede tomar un parámetro como argumento. | Solo puede tomar un parámetro como argumento. |
| 2 | Este método se utiliza para obtener el código HTML dentro del elemento seleccionado en forma de texto. | Este método se utiliza para obtener el texto dentro del elemento seleccionado. | no podemos usar este método que no sea el campo de entrada. |
| 3 | no podemos aplicar este método con el campo de entrada | no podemos aplicar este método con el campo de entrada | solo podemos aplicar este campo de entrada de método para obtener el valor ingresado por el usuario |
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA