Modifica il contenuto di div - jQuery

Come è possibile modificare il contenuto di questo div, quando si fa clic su uno dei LINK?

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

Puoi iscriverti all'evento .click per i link e modificare i contenuti del div utilizzando il .html metodo:

$('.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 tuttavia che se sostituisci il contenuto di questo div, il gestore dei clic che hai assegnato verrà distrutto. Se intendi iniettare alcuni nuovi elementi DOM all'interno del div per i quali devi allegare gestori di eventi, questi allegati dovrebbero essere eseguiti all'interno del gestore .click dopo aver inserito i nuovi contenuti. Se il selettore originale dell'evento viene conservato, puoi anche dare un'occhiata al .delegatemetodo per collegare il gestore.

Ci sono 2 funzioni jQuery che vorrai usare qui.

1) click. Ciò richiederà una funzione anonima come unico parametro e la eseguirà quando si fa clic sull'elemento.

2) html. Questo richiederà una stringa html come unico parametro e sostituirà il contenuto del tuo elemento con l'html fornito.

Quindi, nel tuo caso, ti consigliamo di fare quanto segue:

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

Se solo lo vuoi aggiungere contenuti al tuo div, piuttosto che sostituire tutto in esso, dovresti usare append:

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

Se si desidera che i nuovi collegamenti aggiunti aggiungano anche nuovo contenuto quando si fa clic, è necessario utilizzare la delega dell'evento :

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

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

Puoi provare lo stesso 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;
});

Il .replaceWith()metodo rimuove il contenuto dal DOM e inserisce nuovo contenuto al suo posto con una singola chiamata.

Prova questo per modificare il contenuto di div utilizzando jQuery.

Vedi di più @ Modifica il contenuto di div utilizzando jQuery

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

        // Setting the Div content
        $(".output").text(currentText);
    });
});

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