Select element from dropdown list MDL HTML5

Question

I am newbie in web developer. I am coding select item after adding elements dynamically. I am using MDL (Google's Material Design Lite). When I add elements by hand, it works perfectly,

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height"  style="margin: 10px; width: 250px;">
  <input type="text" value="" class="mdl-textfield__input" id="WC" readonly>
  <input type="hidden" value="" name="WC">
  <label for="WC" class="mdl-textfield__label">WC</label>
  <ul for="WC" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" id ="wc_list">
      <li class="mdl-menu__item" >1</li>
      <li class="mdl-menu__item" >2</li>
  </ul>
</div>

But when I add elements by javascript, I cannot select any element.

for (var i=0; i<5; i++){
   var li=document.createElement("li");
   li.className="mdl-menu__item";
   li.innerHTML="<li>"+i+"</li>";
   document.getElementById("wc_list").appendChild(li);
   componentHandler.upgradeElement(li);
}

How can I select element that added by javascript?