Contenido.
Contenido.
El método .appendTo() de jQuery se utiliza para insertar elementos al final de los elementos seleccionados, similar al método .append(), pero con una sintaxis inversa. Es útil para mover o clonar elementos en el DOM de una manera concisa y legible.
Definición:
El método .appendTo() inserta los elementos seleccionados al final de cada elemento en el conjunto de elementos seleccionados por el argumento.
Sintaxis:
index.js
JavaScript
$(selector).appendTo(target)Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .appendTo() en jQuery</title>
<style>
.nuevo {
color: green;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonMover").click(function(){
$("<li class='nuevo'>Nuevo elemento</li>").appendTo("#lista");
});
});
</script>
</head>
<body>
<button id="botonMover">Mover Elemento</button>
<ul id="lista">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
</body>
</html>
index.js
JavaScript
$("<li class='nuevo'>Nuevo elemento</li>").appendTo("#lista");Explicación del Ejemplo:
En este ejemplo, cuando el usuario hace clic en el botón con el id “botonMover”, un nuevo elemento <li> con la clase “nuevo” y el texto “Nuevo elemento” se crea y se inserta al final de la lista con el id “lista” utilizando el método .appendTo(). Esto agrega dinámicamente un nuevo elemento a la lista en el DOM.
Resultado.
- Elemento 1
- Elemento 2
