动态创建ul＆li

Question

Consider the following code

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

How can I add values(li) ​​dynamically to ul? My incomplete code is as follows:

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

Answer 1

Try this example based on your code:

 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

Instead of looping and continuously adding items to the DOM (which is a relatively expensive operation), I suggest you instead build a string of li from your response.errors object, which you can then add to #validation_summary . To build the string, I have used .reduce() . I have also used the .html() (instead of .innerHTML ) method to then add the list of items to #validation_summary .

See example below:

 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> 

You can just append to your ul while looping through it.