如何动态地在锚标签中编写其他类

Question

       <ul class="cd-dropdown-content">
                   <li class="has-children">
                      <a  class="dropdown-first" ><i class="fa fa-university" aria-hidden="true"></i> Stores<span class="triangle"></span></a>
                      </li>
                   <li class="has-children">
                      <a  class="dropdown-first" ><i class="fa fa-university" aria-hidden="true"></i> Stores<span class="triangle"></span></a>
                    </li>
                 </ul>

上面的代码是静态的，我从json检索数据并存储它 作为回应

我的json数据是

{
  "response":[
       { "id": 1, "name": "Stores","key":"fa-university"},
       {"id": 2, "name": "Categories","key":"fa-university"}
      ]
 }

如何让innerhtml检索这些数据。我试过了    附加孩子，但它不是很好，因为我想要课和锚    标记文本并排如何使用innerHtml

    function list(res)
 {
var list  = document.createElement("UL");
list.className="cd-dropdown-content";
list.id="dropdown-list";
$("#down-wrapper").append(list);
 var response=res.data;
 for(i=0;i<response.length;i++)
 {

    var listelement=document.createElement("LI");
    listelement.className="has-children";
    listelement.id="children";
    $("#dropdown-list").append(listelement);
    var linkelement=document.createElement("A");
    linkelement.className="dropdown-first";
    linkelement.id="inner-links";
    var linktext=document.createTextNode(response[i].name);
    linkelement.appendChild(linktext);
    listelement.appendChild(linkelement);
    $("#dropdown-list").append(listelement);

}