javascript - 如何向 <li> javascript 添加多个跨度

Question

我需要填充<li>使用 JavaScript。我试过这个。

ASPX 代码:

<div class="col-xs-12" id="displayDiv" runat="server">
     <ul id="servicesList" runat="server"></ul>
</div>

JavaScript:

function PopulateList() {
 var json = "[ { \"Id\":1068, \"Name\":\"Doe\" }, { \"Id\":1070, \"Name\":\"Smith\" },{ \"Id\":1074, \"Name\":\"Jones\" } ]";

    var obj = JSON.parse(json);

    var list = document.getElementById('<%= servicesList.ClientID %>');

    for (i = 0; i < obj.length; i++) {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(obj[i].Name));
        li.className = "drag-handle-container";
        li.innerHTML = "<i class='fa fa-bars'></i>";
        li.setAttribute("data-id", obj[i].Id);
        list.appendChild(li);
    }
}

但它没有填充我期望的列表 SPAN我需要这个

<ul id="ctl00_ContentPlaceHolder1_servicesList">
   <li class="sortable-service-item"><span class="drag-handle-container"><i class="fa fa-bars"></i></span><span style="display: none;">1068</span><span>Doe</span></li>
   <li class="sortable-service-item"><span class="drag-handle-container"><i class="fa fa-bars"></i></span><span style="display: none;">1070</span><span>Smith</span></li>
   <li class="sortable-service-item"><span class="drag-handle-container"><i class="fa fa-bars"></i></span><span style="display: none;">1074</span><span>Jones</span></li>
</ul>

根据我的代码，生成的HTML如下，但我需要上面的HTML

<ul id="ctl00_ContentPlaceHolder1_ViewProductService_servicesList">
   <li class="drag-handle-container" data-id="1068"><i class="fa fa-bars"></i></li>
   <li class="drag-handle-container" data-id="1070"><i class="fa fa-bars"></i></li>
   <li class="drag-handle-container" data-id="1074"><i class="fa fa-bars"></i></li>
</ul>

如何使用 javascript for 循环填充上述 HTML 代码？

Answer 1

您正在请求一种方法来实现“上述”HTML(如您所提到的)，但您生成的代码与此有很大不同。有“data-ids”，不同的类名等。尽管如此，理所当然地认为您的“上述”代码是您的目标，以下两种方法将准确地产生这一点。第一种方法遵循您的路径。使用原生 Javascript createElement 函数并将它们附加到 DOM 元素上。第二种方法创建一个表示 HTML 代码的字符串，并将其插入到 DOM 中，从而创建整个列表。

在这两个示例中，我都使用 Array.prototype.forEach()对于数组循环和 Object.keys()对于对象循环。我也用Arrow functions在这些循环中，尽管在本例中这是不必要的。

第一种方法

let json = "[ { \"Id\":1068, \"Name\":\"Doe\" }, { \"Id\":1070, \"Name\":\"Smith\" },{ \"Id\":1074, \"Name\":\"Jones\" } ]";
let obj = JSON.parse(json);
let list = document.getElementById('servicesList');

obj.forEach((ObjectRow)=>{
 let li = document.createElement("li");
     li.className = "sortable-service-item";

 let Span = document.createElement("span");
     Span.className = "drag-handle-container";
     Span.innerHTML = "<i class='fa fa-bars'></i>";
     Span.setAttribute("data-id", ObjectRow["Id"]);

 li.appendChild(Span);

 Object.keys(ObjectRow).forEach((key)=>{
   let tempSpan = document.createElement("span");
       tempSpan.innerHTML = ObjectRow[key];
       li.appendChild(tempSpan);
 });

 list.appendChild(li);
});     

第二种方式

let json = "[ { \"Id\":1068, \"Name\":\"Doe\" }, { \"Id\":1070, \"Name\":\"Smith\" },{ \"Id\":1074, \"Name\":\"Jones\" } ]";
let obj = JSON.parse(json);
let list = document.getElementById('servicesList');
let myHTML;

obj.forEach((ObjectRow)=>{
 myHTML += "<li class='sortable-service-item'>" + 
            "<span class='drag-handle-container' data-id='"+ObjectRow["Id"]+"'>" + 
             "<i class='fa fa-bars'></i>" + 
            "</span>";

  Object.keys(ObjectRow).forEach((key)=>{
   myHTML += "<span>"+ObjectRow[key]+"</span>";
  });
 myHTML += "</li>";
});

list.insertAdjacentHTML("beforeEnd" , myHTML);