title: Updating/overwriting HTML data with jQuery?
body: <p>I am trying to loop through response data and insert values them into the HTML of my webpage, the HTML might already contain some values so I want to clear them and insert only the new ones so it is up to date.</p>
  
  <p>My HTML code looks like this;</p>
  
  <pre><code>&lt;div id="ind"&gt;
    {% for inf in prospect.prospect_industries.all %}
      {% if inf.is_interested %}
        &lt;div&gt;
          &lt;span id="industryInterest" data-fit="id_industry{{inf.id}}"&gt;&lt;/span&gt;
  
          &lt;p&gt;{{inf.get_industry_display}}&lt;/p&gt;
        &lt;/div&gt;
      {% endif %}
    {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS looks like this:</p>
  
  <pre><code> for (i = 0; i &lt; response.length; i++) { 
     //alert(response[i].industry + ":" + response[i].is_interested);
  
     if (response[i].is_interested) {
  
       $("#industryInterest").html(response[i].industry);
       $("#industryInterest").attr("data-fit", response[i].industry);
     }
   }
  </code></pre>
  
  <p>I tried to do something like this</p>
  
  <pre><code>$('#ind').html('');
  </code></pre>
  
  <p>however, that removes the HTML within the #ind div so then I am not able to insert the new values. What is the correct approach to update the HTML in this case? Do I first clear the HTML of the #ind div and then recreate it from jQuery?</p>
  
  <h2>EDIT:</h2>
  
  <p>I managed to get this working using the following code:</p>
  
  <pre><code>$('#industryInterest').html("");
  
    for (i = 0; i &lt; response.length; i++) {
      if (response[i].is_interested) {
        $("#industryInterest").append("&lt;p&gt;" + response[i].industry + "&lt;/p&gt;");
      }
    }
  </code></pre>