title: $(...).text(...).html is not a function error recieved, how to fix it
body: <p>I have a piece of code which by determining on wether an upload is successsful, cancelled or unsuccessful it displays the relevant messages:</p>
  
  <pre><code>function stopImageUpload(success, imagefilename){
  
  
        if (success == 1){
           result = '&lt;span class="imagemsg'+imagecounter+'"&gt;The file was uploaded successfully&lt;/span&gt;';      
           $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" image_file_name="' + imagefilename + '"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
        }
        else if (success == 2){
            result = '&lt;span class="imagemsg'+imagecounter+'"&gt; The file upload was cancelled&lt;/span&gt;';
        }
        else {
           result = '&lt;span class="imagemsg'+imagecounter+'"&gt;There was an error during file upload&lt;/span&gt;';
        }
  
  
      });
  </code></pre>
  
  <p>Now depending on the outcome of the upload I am trying to determine when each message should appear:</p>
  
  <p>Current code of the iframe load:</p>
  
  <pre><code>$(imageuploadform).find(".imageCancel").on("click", function(event) {
                    $('.upload_target_image').get(0).contentwindow;
                    stopImageUpload(2);
  
        $("iframe[name='upload_target_image']").on("load",function() {
        stopImageUpload(1);
      }).attr("src", "cancelimage.php");
  </code></pre>
  
  <p>Original code of the iframe load:</p>
  
  <pre><code>$(imageuploadform).find(".imageCancel").on("click", function(event) {
                    $('.upload_target_image').get(0).contentwindow;
  
        $("iframe[name='upload_target_image']").on("load",function() {
        stopImageUpload(2);
      }).attr("src", "cancelimage.php");
  </code></pre>
  
  <p>What happended with the orignal code was that when a file uploaded succesfully, what happended was that a split second it displayed the success == 1 message but then straight away it displayed the cancel message which is success -- 2.</p>
  
  <p>This was obviously incorrect so to try to fix it, I tried the current code solution so that what I thought would happen is that if cancelled, display the success == 2 message, if file was successful, it displays the success == 1 message and that message did not change. </p>
  
  <p>The problem though is that the current code is providing a error below on this line while the orignal code never provided this error:</p>
  
  <pre><code>function htmlEncode(value) { return $('&lt;div/&gt;').text(value).html(); }
  </code></pre>
  
  <p>The error displaying is:</p>
  
  <blockquote>
    <p>typeError: $(...).text(...).html is not a function</p>
  </blockquote>
  
  <p>My question is how can this error be fixed? I am assuming I need to change code in iframe load to prevent this.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' &gt; 
      &lt;p class='imagef1_upload_form' align='center'&gt;&lt;label&gt;
      Image File: &lt;input name='fileImage' type='file' class='fileImage' /&gt;&lt;/label&gt;&lt;br/&gt;
      &lt;input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /&gt;&lt;/label&gt;
      &lt;input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /&gt;&lt;/label&gt;" +
      &lt;/p&gt;&lt;p class='listImage' align='left'&gt;&lt;/p&gt;" +
      &lt;iframe class='upload_target_image' name='upload_target_image' src='#' style='width:0px;height:0px;border:0px;solid;#fff;'&gt;&lt;/iframe&gt;&lt;/form&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>var sourceImageForm;
  
  function htmlEncode(value) { return $('&lt;div/&gt;').text(value).html(); }
  
  //Function for when file starts uploading
  
  function startImageUpload(imageuploadform){
  
    $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
    $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
    $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
    $(imageuploadform).find('.imagemsg').css('visibility','hidden');
    sourceImageForm = imageuploadform;
  
            $(imageuploadform).find(".imageCancel").on("click", function(event) {
                    $('.upload_target_image').get(0).contentwindow;
                    stopImageUpload(2);
  
        $("iframe[name='upload_target_image']").on("load",function() {
        stopImageUpload(1);
      }).attr("src", "cancelimage.php");
  
  }); 
        return true;
  }
  
        var imagecounter = 0;
  
  //Function for after upload has stopped
  
  function stopImageUpload(success, imagefilename){
  
        var result = '';
        imagecounter++;
  
        if (success == 1){
           result = '&lt;span class="imagemsg'+imagecounter+'"&gt;The file was uploaded successfully&lt;/span&gt;';      
           $('.listImage').eq(window.lastUploadImageIndex).append('&lt;div&gt;' + htmlEncode(imagefilename) + '&lt;button type="button" class="deletefileimage" image_file_name="' + imagefilename + '"&gt;Remove&lt;/button&gt;&lt;br/&gt;&lt;hr/&gt;&lt;/div&gt;'); 
        }
        else if (success == 2){
            result = '&lt;span class="imagemsg'+imagecounter+'"&gt; The file upload was cancelled&lt;/span&gt;';
        }
        else {
           result = '&lt;span class="imagemsg'+imagecounter+'"&gt;There was an error during file upload&lt;/span&gt;';
        }
  
        $(sourceImageForm).find(".fileImage").replaceWith("&lt;input type='file' class='fileImage' name='fileImage' /&gt;");
  
    var _imagecounter = imagecounter;
  
  $('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
      var image_file_name = $(this).attr('image_file_name');
  
      jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
          .done(function(data) {
  
          $(".imagemsg" + _imagecounter).html(data);
      });
  
      $(this).parent().remove();
  });
  
        return true;   
  }
  
  //clickHandler function which handle the submit when upload button is click
  
    function imageClickHandler(imageuploadform){ 
    if(imageValidation(imageuploadform)){ 
        window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
        return startImageUpload(imageuploadform); 
    } 
    return false;
  }
  </code></pre>
  
  <p>PHP (uploads file server side):</p>
  
  <pre><code>&lt;?php
  
  ini_set('display_errors', 1);
  error_reporting(E_ALL);
  
  
  session_start();
  
  
  if ($_FILES['fileImage']['error'] === UPLOAD_ERR_OK) {
  $result = 0;
  
  
  if (getimagesize($_FILES['fileImage']['tmp_name'])) {
  if ((($_FILES["fileImage"]["type"] == "image/gif") || ($_FILES["fileImage"]["type"] == "image/jpeg") || ($_FILES["fileImage"]["type"] == "image/pjpeg") || ($_FILES["fileImage"]["type"] == "image/jpg")) &amp;&amp; ($_FILES['fileImage']['size'] &gt; 0)) {
  if (is_file("ImageFiles/" . $_FILES['fileImage']['name'])) {
  $parts = explode(".", $_FILES['fileImage']['name']);
  $ext   = array_pop($parts);
  $base  = implode(".", $parts);
  $n     = 2;
  
  while (is_file("ImageFiles/" . $base . "_" . $n . "." . $ext))
      $n++;
  $_FILES['fileImage']['name'] = $base . "_" . $n . "." . $ext;
  
  move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
  $result = 1;
  
  
  }
  
  else {
  move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);
  $result = 1;
  }
  
  }
  
  }
  } else {
  echo "Upload was not successful";
  }
  
  ?&gt; 
  
  &lt;script language="javascript" type="text/javascript"&gt;window.top.stopImageUpload(&lt;?php
  echo $result;
  ?&gt;, '&lt;?php
  echo $_FILES['fileImage']['name'];
  ?&gt;');&lt;/script&gt; 
  </code></pre>