En este artículo, veremos cómo crear un elemento HTML usando jQuery. Para crear y agregar un elemento HTML, usamos el método jQuery append() .
El método jQuery append() se usa para insertar algún contenido al final de los elementos seleccionados.
Sintaxis:
$(selector).append( content, function(index, html) )
Parámetros:
- contenido: Es un parámetro obligatorio y se utiliza para especificar el contenido que se insertará al final de los elementos seleccionados. El valor posible de los contenidos son elementos HTML, objetos jQuery y elementos DOM.
- function(index, html): Es un parámetro opcional y se utiliza para especificar la función que devolverá el contenido a insertar.
- index: Se utiliza para devolver la posición de índice del elemento.
- html: Se utiliza para devolver el HTML actual del elemento seleccionado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create an HTML element using jQuery?
</title>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to add div element in the HTML document -->
<script>
$(document).ready(function() {
$("button").click(function() {
$(".append").append(
'<div class="added">New HTML element added</div>');
});
});
</script>
<!-- Style to use on div element -->
<style>
.added {
padding: 20px;
margin-top: 20px;
background: green;
color: white;
display: inline-block;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>
How to create an HTML element using jQuery?
</h3>
<button id="append">Append New HTML Element</button>
<div class="append"></div>
</center>
</body>
</html>
Producción:
