Este método append() en jQuery se usa para insertar algún contenido al final de los elementos seleccionados.
Sintaxis:
$(selector).append( content, function(index, html) )
Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- 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 1: este ejemplo agrega el contenido al final del párrafo y la lista.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery append() Method
</title>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to append content -->
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Append Geeks</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Append Gfg</li>");
});
});
</script>
</head>
<body>
<h1 style="margin-left: 150px;">Geeks</h1>
<p>GeeksforGeeks</p>
<p>Jquery</p>
<ol>
<li>Gfg 1</li>
<li>Gfg 2</li>
<li>Gfg 3</li>
</ol>
<button id="btn1">Append Geeks</button>
<button id="btn2">Append Gfg</button>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agrega el contenido al final del párrafo.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery append() Method
</title>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to append content -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").append(function(n) {
return "<b> Index of Element is "
+ n + ".</b>";
});
});
});
</script>
</head>
<body>
<h1 style="margin-left:150px;">Geeks</h1>
<p>Geeks for Geeks</p>
<p>Jquery_append</p>
<button>
Insertion using Append Method()
</button>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA