ejemplo de append para añadir contenido HTML con JQuery

ejemplo de append para añadir contenido HTML con JQuery

ejemplo de append para añadir contenido HTML con JQuery

con este ejemplo aprendes como utilizar la funcion append de jQuery para añadir contenido al final de un elemento que ya existe

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
$("p").append(" <b>Videotutoriales.es</b>.");
});

$("#boton2").click(function(){
$("ol").append("<li>Curso Nuevo</li>");
});
});
</script>
</head>
<body>

<p>Aprendo en:</p>
<p>Me gusta:</p>

<ol>
<li>Curso 1</li>
<li>Curso 2</li>
<li>Curso 3</li>
</ol>

<button id="boton1">Nuevo texto</button>
<button id="boton2">Nuevo elemento a lista</button>

</body>
</html>

como puedes ver el código, en el apartado del Body tenemos dos párrafos y una lista con 3 elementos

y en la parte de programación con JavaScript tenemos un enlace a la librería jQuery y a continuación toda la programación necesaria para añadir un texto al final de cada párrafo y añadir un elemento más a la lista

dentro del método ready del documento utilizaremos dos eventos Click .

El identificado como botón 1 para añadir al final de los párrafos el texto Videotutoriales.es en negrita.

y el identificado como botón 2 para añadir un elemento más a la lista que ponga curso nuevo.

ahora bien si en lugar de querer añadir texto al final con el metodo append quieres añadirlo al principio tienes que utilizar el método prepend:

  
$("p").prepend("<b>videotutoriales.es</b>. ");
$("ol").prepend("<li>Nuevo Curso</li>. ");

 

como puedes ver con estos dos métodos de jQuery append y prepend podemos modificar el contenido de cualquier elemento

simplemente tienes que primero identificar el elemento, párrafo, una lista, un DIV … utilizar el método append para añadir texto al final o prepend para añadir texto al principio

y después entre comillas indicarle lo que quieres que muestre …. y aquí es donde puedes incluir código HTML negritas, lista,s desordenadas, etc …