如何使用 JQuery 替换 div 的内容而不是附加值？

Question

I am pretty new in JQuery and I have the following problem.

I have create this JQuery function that when the user select a file into an input tag having id=rendicontoAllegato it put the name of this file into an hidden div having id=nomeDocumentoRendicontazione into my page

$(document).ready(function() {

    $("#rendicontoAllegato").change(function() {
        alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());

        var selectedFileName = $("#rendicontoAllegato").val();

        $('#nomeDocumentoRendicontazione').append(selectedFileName);

    });
 });

It works fine but the only problem is that if I first select something as file1.txt and then select another file as file2.txt into the div having id=nomeDocumentoRendicontazione I will have the concatenation of the 2 files name.

So I will have something like file1.txtfile2.txt and it is not good for me.

How can I replace the value of the div having id=nomeDocumentoRendicontazione instead to append a new value inside it?

Answer 1

You can use the .text() fn if you are dealing with with your data to be inserted as text or .html() fn if you are dealing with html to be replaced

$('#nomeDocumentoRendicontazione').text(selectedFileName);

Or

$('#nomeDocumentoRendicontazione').html(selectedFileName);

Answer 2

Use html() instead of append().

$(document).ready(function() {

    $("#rendicontoAllegato").change(function() {
        alert("DOCUMENTO dopo selezione: " + $("#nomeDocumentoRendicontazione").text());

        var selectedFileName = $("#rendicontoAllegato").val();

        $('#nomeDocumentoRendicontazione').html(selectedFileName);

    });
 });

Answer 3

You have to use

 $('#nomeDocumentoRendicontazione').html(selectedFileName);

it will replace the already present HTML of that. OR you can use

 $('#nomeDocumentoRendicontazione').text(selectedFileName);

it will do the same but append your data as text.