Cambiar el contenido de div - jQuery

89

¿Cómo es posible cambiar el contenido de este div, cuando se hace clic en uno de los LINKS?

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>
Oliver 'Oli' Jensen
fuente
una pregunta similar para referirse: stackoverflow.com/questions/1309452/…
Gurjot kaur

Respuestas:

156

Puede suscribirse al evento .click para los enlaces y cambiar el contenido del div usando el .htmlmétodo:

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').html(linkText);

    // cancel the default action of the link by returning false
    return false;
});

Sin embargo, tenga en cuenta que si reemplaza el contenido de este div, el controlador de clics que ha asignado se destruirá. Si tiene la intención de inyectar algunos elementos DOM nuevos dentro del div para los que necesita adjuntar controladores de eventos, estos adjuntos deben realizarse dentro del controlador .click después de insertar el nuevo contenido. Si se conserva el selector original del evento, también puede echar un vistazo al .delegatemétodo para adjuntar el controlador.

Darin Dimitrov
fuente
1
¿Cómo puedo cargar contenido de OTRO div, en la misma página, en # content-container?
Oliver 'Oli' Jensen
2
@Oliver 'Oli' Jensen, así:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov
¡gracias a Dios! Me di cuenta de que .val () no puede cambiar #div; en su lugar, deberíamos usar .html (); funciones para que funcione! : D @cuSK gracias
gumuruh
live saver @DarinDimitrov
excitadomicrobe
14

Hay 2 funciones de jQuery que querrá usar aquí.

1) click. Esto tomará una función anónima como su único parámetro y la ejecutará cuando se haga clic en el elemento.

2) html. Esto tomará una cadena html como su único parámetro y reemplazará el contenido de su elemento con el html proporcionado.

Entonces, en su caso, querrá hacer lo siguiente:

$('#content-container a').click(function(e){
    $(this).parent().html('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Si solo desea agregar contenido a su div, en lugar de reemplazar todo lo que contiene, debe usar append:

$('#content-container a').click(function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Si desea que los nuevos enlaces agregados también agreguen contenido nuevo al hacer clic, debe usar delegación de eventos :

$('#content-container').on('click', 'a', function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});
Joseph Silber
fuente
5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});
Jørgen
fuente
2

Puedes intentar lo mismo con replacewith ()

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').replaceWith(linkText);

    // cancel the default action of the link by returning false
    return false;
});

El .replaceWith()método elimina contenido del DOM e inserta contenido nuevo en su lugar con una sola llamada.

Manoj Kadolkar
fuente
1

Intente esto para cambiar el contenido de div usando jQuery.

Ver más @ Cambiar el contenido de div usando jQuery

$(document).ready(function(){
    $("#Textarea").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output").text(currentText);
    });
});
Jonathan Klevin
fuente
-1

Tratar $('#score_here').html=total;

Sanjay Devarajan
fuente