Question

我需要使用JavaScript填充<li>。我尝试过了。

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

请尝试更新代码：

根据需要更改for循环内的值。

for (i = 0; i < 3; i++) {
    var li = document.createElement("li");
    li.className  = "drag-handle-container";
    var span_1 = document.createElement("span");
    span_1.setAttribute('class', 'drag-handle-container');
    span_1.innerHTML = '<i class="fa fa-bars"></i>';
    li.appendChild(span_1);
    var span_2 = document.createElement("span");
    span_2.style.display = 'none';
    span_2.innerHTML = '1068';
    li.appendChild(span_2);
    var span_3 = document.createElement("span");
    span_3.innerHTML = 'Doe';
    li.appendChild(span_3);
    console.log(li);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您正在请求一种实现“高于” HTML（如您所提到的）的方法，但是生成的代码与之大不相同。有“数据ID”，不同的类名称等。不过，理所当然的是，您的“以上”代码是您的目标，以下两种方式将完全产生这种效果。第一种方法遵循您的道路。使用本机Javascript createElement函数并将它们附加在DOM元素上。第二种方法创建一个表示HTML代码的字符串，并将其插入到DOM中，从而创建整个列表。

在两个示例中，我都将Array.prototype.forEach()用于Array循环和 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);

如何将多个跨度添加到<li> JavaScript

2 个答案: