Cambiar el contenido de div - jQuery

Question

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

<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> 

Answer 1

Usted puede suscribirse para el evento .click para los enlaces y cambiar el contenido del div utilizando el método de .html:

$('.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; 
}); 

Nota sin embargo, que si se reemplaza el contenido de este div el clic controlador que ha asignado será destruido. Si tiene la intención de inyectar algunos elementos DOM nuevos dentro del div para los cuales debe adjuntar controladores de eventos, estos archivos adjuntos se deben realizar dentro del controlador .click después de insertar los nuevos contenidos. Si se conserva el selector original del evento, también puede consultar el método .delegate para adjuntar el controlador.

Answer 2

Hay 2 funciones jQuery que deseará usar aquí.

1) click. Esto tomará una función anónima ya que es el único parámetro y lo 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.

Así, en su caso, tendrá que hacer lo siguiente:

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

---

Si sólo desea añadir contenido a su div, en lugar de sustituir todo en él, se debe utilizar append:

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

---

Si quieren º e nueva enlaces añadió también añadir nuevos contenidos cuando se hace clic, se debe utilizar event delegation:

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

Answer 3

$('a').click(function(){ 
$('#content-container').html('My content here :-)'); 
}); 

Answer 4

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

Answer 5

Puede 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 método .replaceWith() elimina contenido del DOM e inserta nuevo contenido en su lugar con una sola llamada.