Problema con elemento pre-stampato ajax

[deleted_193]

Salve, ho una doppia chiamata ajax:

in pagina 1: <div class="prova"></div>
pagina 1:
			$.ajax({
				type: "POST",
				url: "../pagina2.php",
				data: "prova=" + prova,
				dataType: "html",
				success: function (html) {
					$('.prova').after(html);
				}
			});
pagina 2:
			$.ajax({
				type: "POST",
				url: "../pagina3.php",
				data: "prova_2=" + prova_2,
				dataType: "html",
				success: function (html) {
					$('.prova').html(html);
				}
			});

La mia domanda è: perchè la seconda chiamata non sovrascrive il contenuto della prima, ma stampa sopra?
Il primo elemento è ok, perchè è quello l'effetto che cerco, ma poi vorrei che pagina2.php sovrascrivesse se richiesto il contenuto del div, quindi togliendolo anche graficamente di mezzo. Avevo pensato anche di dargli un attributo css per levarlo, e funziona, solo che mi leva anche gli altri che si sono aperti, quindi non và bene.
Come devo modificare la chiamata ajax per ottenere l'efetto voluto?

[cavicchiandrea]

Perché la prima chiamata non scrivi nel elemento .prova ma aggiungi il response fuori dal oggetto stesso con after

[deleted_193]

Quell'after l'avveo lasciato per una stampa che mi serviva, pensavo fosse solo un effetto grafico a dire la verità....
Vabbè, creerò un'altro div per contenere le altre stampe, comunque la tua correzione funziona.