Question

I am trying to append this: '<div>' + htmlEncode(imagefilename) + '</div>' when the user clicks on the cancel button (.imageCancel). But it is giving me this error: $('<div/>').text(value).html(); is not a function. How can this error be fixed? Is it because

$('.cancelImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '</div>'); 

is in the $(".imageCancel").on("click", function(event) { function?

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}


function startImageUpload(imageuploadform, imagefilename) {


    $(".imageCancel").on("click", function (event) {

        $('.cancelImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '</div>');

        var image_file_name = $(this).attr('image_file_name');
        jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)

        $(this).parent().remove();

        $('.upload_target').get(0).contentwindow

        return stopImageUpload();

    });

    return true;
}

Answer 1

Try changing the function to

function htmlEncode(value) { return $('<div/>').text(value || '').html(); }

I suspect that .text() might be a little un-rigorous about testing its argument, and interpreting a null as meaning that you want the function to return the current text content of the selected element.

Now, as to why the argument would be null, well, that depends on the rest of your code.