使用jQuery更新/覆盖HTML数据？

Question

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.

My HTML code looks like this;

<div id="ind">
  {% for inf in prospect.prospect_industries.all %}
    {% if inf.is_interested %}
      <div>
        <span id="industryInterest" data-fit="id_industry{{inf.id}}"></span>

        <p>{{inf.get_industry_display}}</p>
      </div>
    {% endif %}
  {% endfor %}
</div>

My JS looks like this:

 for (i = 0; i < 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);
   }
 }

I tried to do something like this

$('#ind').html('');

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?

EDIT:

I managed to get this working using the following code:

$('#industryInterest').html("");

  for (i = 0; i < response.length; i++) {
    if (response[i].is_interested) {
      $("#industryInterest").append("<p>" + response[i].industry + "</p>");
    }
  }

Answer 1

So, as we learned - using same id for multiple elements is not allowed. Of course, you can add same ids, but your code

$("#industryInterest")

will select only first one.

That's why you need to use something else. Use a class industryInterest :

<span class="industryInterest" ....

Next, you want to update not all span s but ones which are is_interested . For getting element with certain index use eq

So, your code becomes:

for (i = 0; i < response.length; i++) { 
   //alert(response[i].industry + ":" + response[i].is_interested);

   if (response[i].is_interested) {
     // we use class here and we're getting 
     // element with the same index as i
     // and you can chain jquery functions too!
     $(".industryInterest").eq(i)
         .html(response[i].industry)
         .attr("data-fit", response[i].industry);
   }
}