En este artículo, veremos cómo agregar un elemento con un mensaje de texto cuando se cambia un campo de entrada en jQuery. Para agregar un elemento con un mensaje de texto cuando se cambia el campo de entrada, se usan los métodos change() y appendTo(). El método change() se usa para detectar el cambio en el valor de los campos de entrada. Este método solo funciona en los elementos “<input>, <textarea> y <select>”. El método appendTo() se usa para agregar los elementos.
Sintaxis:
$($selector).change(function() { })
Aquí, primero usamos el método change() para detectar los cambios del campo de entrada y el método appendTo() se usa para mostrar el mensaje.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to append an element with a text message
when an input field is changed in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#textInput").change(function () {
$("<p>Input text has changed.</p>")
.appendTo("body");
});
});
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.clickable_ele {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to append an element with a text message
<br>when an input field is changed in jQuery?
</h3>
<form action="#">
<input id="textInput" type="text"
value="GeeksforGeeks">
</form>
</body>
</html>
Producción:
