Help with creating elements dynamically and adding listeners

programming web dev
1

Hello,
Using JS and jQuery how can I add a number of <li> elements to a <ul> tag? I want to replace all of these list items. Does jQuery have something similar to a for loop?
I also have to add listeners to each one of them, but I might be able to tackle that one.


<div id="scrubber">
  
  <ul id="scrubberList">
   <li><span id="First Search Button" class="scrubberBtn">|</span></li>
   <li><span id="youtubeSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="wikiSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="DrudgeSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="TownHallSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="BenelliSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="Home Search Button" class="scrubberBtn">|</span></li>
   <li><span id="DrudgeSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="TownHallSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="BenelliSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="Home Search Button" class="scrubberBtn">|</span></li>
   <li><span id="DrudgeSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="TownHallSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="BenelliSearch Button" class="scrubberBtn">|</span></li>
   <li><span id="Home Search Button" class="scrubberBtn">|</span></li>
   <li><span id="DrudgeSearch Button" class="scrubberBtn">|</span></li>  
   
  </ul>
  
  </div>



/* This function creates listeners on the tick marks in the console page scrubber. MH */
function createScrubberTicks(){
    $('#scrubberList')
        .click(function(){
            $(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
        })
        .mouseenter(function () {$('#page_display').html(this.id);})
        .mouseleave(function () {$('#page_display').html("");});
}