En este artículo, veremos cómo usar el método append() en jQuery. El método append() se usa para insertar contenido nuevo dentro de un elemento existente. También existen otros métodos que permiten insertar contenido nuevo dentro de un elemento existente y estos son: prepend() , html() , text() , before() , after() , wrap() , etc.
Ahora, intentemos entender el método append() en detalle. Este método se utiliza para insertar contenido al final de los elementos seleccionados.
Sintaxis:
$(selector).append(content, function(index, html))
Parámetros:
- contenido: Es un parámetro obligatorio que especifica el contenido que desea insertar. Puede contener principalmente 3 tipos de valores posibles y estos son:
- valores HTML
- objetos jQuery
- valores DOM
- function(index, HTML): Es un parámetro opcional que especifica la función que toma dos parámetros index y HTML que devuelve el contenido que se quiere insertar.
- índice: este parámetro especifica la posición de índice del elemento en el conjunto.
- HTML: este parámetro especifica el HTML actual del elemento seleccionado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What is the use of append() method in JQuery?
</title>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$('div').append(' GeeksforGeeks')
})
});
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>
What is the use of append() method in jQuery?
</h2>
<div>Welcome to</div>
<br>
<button id="btn">Append Text</button>
</body>
</html>
Producción:
