Dynamically change text

Question

Is it possible to dynamically change the ordering in this HTML ?

<li><a href="#step-4">
  <label class="stepNumber">4</label>
  <span class="stepDesc">
     Finish<br />
     <small>LAST STEP</small>
  </span>                   
</a></li>

I have a button with id 'finish' that when clicked will submit some data via ajax. Once this is done, I'd like to change the above words:

Finish should become finished LAST STEP should be come completed.

Any way I can do this ?

Thanks

$('#finish').click(function() {

});

Answer 1

Your ajax success would be as below:

$('#finish').click(function() {
    $.ajax({
         ...
         ...
         success:function(data)
         {
             $('span.stepDesc').text('Finished');
             $('span.stepDesc small').text('Completed');

         }
     });
});

Answer 2

Try this:

$(document).ready(function() {
   $('#finish').on('click',function(event) {
       $('.stepDesc')[0].innerHTML = 'Finished<br /><small>COMPLETED</small>'
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#step-4">
  <label class="stepNumber">4</label>
  <span class="stepDesc">
     Finish<br />
     <small>LAST STEP</small>
  </span>                   
</a></li>

<button id="finish">Finish</button>

And just for future reference. If it's only to change text use text() instead of innerHTML due to performance. So probably any other answer here using text() is better in performance compared to mine, but I'll let mine stay here for diversity.