En este artículo, veremos cómo agregar un nuevo elemento de encabezado después de hacer clic en los elementos de encabezado existentes en jQuery. Para agregar el nuevo elemento de encabezado, se usa el método delegar().
Sintaxis:
$(selector).delegate("Selected_elements", function() {
$(this).after("content");
})
Aquí, usamos el método delegado() para agregar uno o más controladores de eventos al elemento especificado que son elementos secundarios de los elementos seleccionados. Además, usamos el método after() para insertar contenido, especificado por el parámetro para cada elemento seleccionado en el conjunto de elementos coincidentes.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to Click on header to add
another header in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("body").delegate("h1, h3", "click", function () {
$(this).after("<h4>Added Another Header!</h4>");
});
});
</script>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to Click on header to add
another header in jQuery?
</h3>
</body>
</html>
Producción:
