动态创建ul＆li

法尔希德·阿齐兹

考虑以下代码

<div class = 'text-danger'><ul id = 'validation_summary'></ul></div>

如何动态地向ul添加值（li）？我不完整的代码如下：

Object.entries(response.errors).forEach(([key,value]) => {
$("validation_summary").innerHTML = ('<li>' + key + ' value +' </li>').appendTo($("div:has(ul)"));
});

尼克·帕森斯

建议您不要循环并向DOM连续添加项目（这是一项相对昂贵的操作），而是建议您li从response.errors对象中构建一个字符串，然后可以将其添加到中#validation_summary。为了构建字符串，我使用了.reduce()。我还使用了.html()（而不是.innerHTML）方法，然后将项目列表添加到中#validation_summary。

请参见下面的示例：

const response = {
  errors: {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
  }
}

const list_items = Object.entries(response.errors)
                         .reduce((acc, [key, value]) => 
                           acc + '<li>' + key + ' ' + value + '</ li>', 
                         '');

$("#validation_summary").html(list_items)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='text-danger'>
  <ul id='validation_summary'></ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。