# Help with creating elements dynamically and adding listeners

**URL:** <https://forum.kirupa.com/t/help-with-creating-elements-dynamically-and-adding-listeners/329638>\
**Category:** web dev\
**Created:** [September 25, 2012, 8:37pm UTC](https://forum.kirupa.com/t/help-with-creating-elements-dynamically-and-adding-listeners/329638 "2012-09-25T20:37:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![m2244](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@m2244](https://forum.kirupa.com/u/m2244)\
**Post date:** [September 25, 2012, 8:37pm UTC](https://forum.kirupa.com/t/help-with-creating-elements-dynamically-and-adding-listeners/329638/1 "2012-09-25T20:37:22Z")

</div>

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.

```auto

<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>

```

```auto

/* 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("");});
}

```