Question

考虑以下代码

<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)"));
});

Answer 1

根据您的代码尝试以下示例：

const response = {
  errors: {
    err1: 'error 1',
    err2: 'error 2',
    err3: 'error 3',
  }
}

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

<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>

Answer 2

我建议您不要从li对象构建一个response.errors字符串，然后将其添加到DOM中，而将其循环并不断地添加到DOM中（这是一个相对昂贵的操作）。 #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>

Answer 3

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

let errors = {one:"test 1",two : "test 2"};

Object.entries(errors).forEach(([key,value]) => {
    $(`<li>${key} -- ${value} </li>`).appendTo("ul#validation_summary");
});

<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>

您可以在遍历ul时附加到ul。

动态创建ul＆li

3 个答案: