如何使用str将li添加到ul？

Question

我正在制作一个Overwatch Lootbox模拟器，我只是添加＆＃34;项目日志＆＃34;它。我已经将它展示出来并且没有显示这个区域（ul），一旦你拿到它们，它们就会出现。这可能听起来令人困惑，可能只是我想要做的是向（li）添加一个项目符号点（ul），项目符号内的内容将是你得到的项目，那就是已定义为str（JS中的第92行）。

JAVASCRIPT：

var crate
var openSound = new Audio('open-box.ogg');
var results = [];
var isRunning = false;

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

function itemLog(btn) {
  var hide = document.getElementById("itemlog")
  if (btn.id.match("plus")) {
      btn.id = "minus";
      hide.style.display = "block";
  }
  else {
    btn.id = "plus";
    hide.style.display = "none";
  }
}

function openBox(){

  if(isRunning == false){
    //Reset Crate
    results = [];
    setTimeout(delay,1750);
    setTimeout(hideBox,750);
    setTimeout(deleteCards,1050);
    openSound.play();
    $('#box').animateCss('bounceOutUp');
    $('#item0').animateCss('bounceOutUp');
    $('#item1').animateCss('bounceOutUp');
    $('#item2').animateCss('bounceOutUp');
    $('#item3').animateCss('bounceOutUp');

    isRunning = true;
  }
}

function deleteCards(){
  $( "#item0" ).remove();
  $( "#item1" ).remove();
  $( "#item2" ).remove();
  $( "#item3" ).remove();
}

function hideBox(){
  $( "#box" ).remove();
}

function delay(){
  setTimeout(setBox,250);

}

function setBox(){


  for(i = 0; i < 3; i++){
    //Randomize Loot
    crate = chance.weighted(loot, weights);
    results.push(crate);
    console.log(crate);
  }

  cratespec = chance.weighted(specloot, specweights);
  results.push(cratespec);

  endresults = chance.shuffle(results);
  displayBox();

}

function displayBox(){
  //Add to list
  for(i = 0; i < endresults.length; i++){
    var ul = document.getElementById("crate");
    var li = document.createElement("li");
    var span = document.createElement("span");
    span.appendChild(document.createTextNode(endresults[i]));
    li.setAttribute("id", "item" + i);
    ul.appendChild(li);
    li.appendChild(span);

    //Check Quality and Strip
    var str = $("#item" + i).text();
    console.log(str);
     if(endresults[i].indexOf("Normal") !=-1){
      $("#item" + i).addClass("normal animated bounceInDown");
      $("#item" + i ).find('span').text(str.substring(7));
    }
    if (endresults[i].indexOf("Rare") !=-1){
      $("#item" + i).addClass("rare animated bounceInDown");
      $("#item" + i).find('span').text(str.substring(5));
    }
    if(endresults[i].indexOf("Epic") !=-1){
      $("#item" + i).addClass("epic animated bounceInDown");
      $("#item" + i).find('span').text(str.substring(5));
    }
    if(endresults[i].indexOf("Lgnd") !=-1){
      $("#item" + i).addClass("legendary animated bounceInDown");
      $("#item" + i).find('span').text(str.substring(5));
    }

    //Check Hero
    //Generic
    if(endresults[i].indexOf("Spray") || endresults[i].indexOf("Coins") !=-1){
      $("#item" + i).addClass("generic");
    }
    //orisa
    if(endresults[i].indexOf("Orisa") !=-1){
      $("#item" + i).addClass("orisa");
    }

    //sombra
    if(endresults[i].indexOf("Sombra") !=-1){
      $("#item" + i).addClass("sombra");
    }
    //ana
    if(endresults[i].indexOf("Ana") !=-1){
      $("#item" + i).addClass("ana");
    }
    //bastion
    if(endresults[i].indexOf("Bastion") !=-1){
      $("#item" + i).addClass("bastion");
    }
    //dva
    if(endresults[i].indexOf("D.Va") !=-1){
      $("#item" + i).addClass("dva");
    }
    //genji
    if(endresults[i].indexOf("Genji") !=-1){
      $("#item" + i).addClass("genji");
    }
    //hanzo
    if(endresults[i].indexOf("Hanzo") !=-1){
      $("#item" + i).addClass("hanzo");
    }
    //junkrat
    if(endresults[i].indexOf("Junkrat") !=-1){
      $("#item" + i).addClass("junkrat");
    }
    //lucio
    if(endresults[i].indexOf("Lucio") !=-1){
      $("#item" + i).addClass("lucio");
    }
    //McCree
    if(endresults[i].indexOf("McCree") !=-1){
      $("#item" + i).addClass("mccree");
    }
    //Reaper
    if(endresults[i].indexOf("Reaper") !=-1){
      $("#item" + i).addClass("reaper");
    }
    //Mei
    if(endresults[i].indexOf("Mei") !=-1){
      $("#item" + i).addClass("mei");
    }
    //Mercy
    if(endresults[i].indexOf("Mercy") !=-1){
      $("#item" + i).addClass("mercy");
    }
    //Pharah
    if(endresults[i].indexOf("Pharah") !=-1){
      $("#item" + i).addClass("pharah");
    }
    //Reinhardt
    if(endresults[i].indexOf("Reinhardt") !=-1){
      $("#item" + i).addClass("reinhardt");
    }
    //Roadhog
    if(endresults[i].indexOf("Roadhog") !=-1){
      $("#item" + i).addClass("roadhog");
    }
    //Solider76
    if(endresults[i].indexOf("Soldier: 76") !=-1){
      $("#item" + i).addClass("soldier");
    }
    //Symmetra
    if(endresults[i].indexOf("Symmetra") !=-1){
      $("#item" + i).addClass("symmetra");
    }
    //Torbjorn
    if(endresults[i].indexOf("Torbjorn") !=-1){
      $("#item" + i).addClass("torbjorn");
    }
    //Tracer
    if(endresults[i].indexOf("Tracer") !=-1){
      $("#item" + i).addClass("tracer");
    }
    //Widowmaker
    if(endresults[i].indexOf("Widowmaker") !=-1){
      $("#item" + i).addClass("widowmaker");
    }
    //Winston
    if(endresults[i].indexOf("Winston") !=-1){
      $("#item" + i).addClass("winston");
    }
    //Zarya
    if(endresults[i].indexOf("Zarya") !=-1){
      $("#item" + i).addClass("zarya");
    }
    //Zenyatta
    if(endresults[i].indexOf("Zenyatta") !=-1){
      $("#item" + i).addClass("zenyatta");
    }

  }
  isRunning = false;
}

function shakeBox(){
  $("#box").addClass("shakebox");
  setTimeout(removeShake,820);
}

function removeShake(){
  $("#box").removeClass("shakebox");
  setTimeout(shakeBox,1820);
}

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Home |OWLBS</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chance.js"></script>
<script type="text/javascript" src="js/loot.js"></script>
<script type="text/javascript" src="js/spec-loot.js"></script>
<script type="text/javascript" src="js/engine.js"></script>
<body>
<header>
  <nav>
    <div class="grid">
      <div class="grid__item large--one-third logo">
          <h1>
            <a href="index.html" class="logo"><span class="loot">OW</span><span class="junkie">LBS</span></a>
            <span class="version">This is not made by me, I edited another file!</span>
          </h1>
      </div>
      <div class="grid__item large--two-thirds medium-down--hide nav">
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="changelog.html">Changelog</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

  <div class="wrapper">
    <div class="grid">
      <div class="grid__item item-section">
        <img id="box" src="images/loot-box.png" alt="Loot Box">
        <ul id="crate"></ul>
      </div>
    </div>
  </div>

  <div class="small-wrapper">
    <div class="grid">
      <div class="grid__item center">
        <a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()">OPEN LOOT BOX</a>
        <a class="btn blue btn-toggle" onclick="itemLog(this)" id="plus" href="#">Item Log <i id="bt" aria-hidden="true"></i></a>
        <div class="grid__item center">
        <ul id="itemlog" style="display: none;" class="in-use">
        <li id="inv0"></ul>
      </div>
      </div>

      <div class="grid__item center">
        <div class="note"> Only for overwatch fans!</div>
      </div>
    </div>
  </div>

</body>
</html>

希望这就够了。