Update the dom instead of append with jQuery

Question

I have a question about jQuery: I now render content from an array to the dom with:

errors.forEach(error => {
  let message = error.message;
  let fileName = error.fileName;
  $('.errors').append("<li class=\"error-item\">".concat(fileName, " : ").concat(message, "</li><br>"));
});

but I got some actions that update the array where I render the content from, but when I run this function after the update of the array, it appends. I use the .empty() before now but that feels like a hack around but I want it to update

I hope this make sense

What can I do that it updates the dom instead of appending?

I hope someone can help me with this

Answer 1

The jQuery method .html() overwrites the content of the targeted element(s) with a given htmlString . The following demo function logger() will accept an array of objects and render the data in a <ul> .

 let failData = [{ DOM: '.fail', title: 'Errors: ', header: ['File', 'Message'] }, { item: '12ffda8a99.log', message: 'Connection failed' }, { item: 'bb6200c400.log', message: 'Corrupted download' }, { item: 'd93ba66731.log', message: 'Encryption key needed' }, { item: '08caa5240f.log', message: 'Mismatched certification' }, { item: 'dead0b8a99.log', message: 'Insecure protocol' } ]; let warnData = [{ DOM: '.warn', title: 'Alerts: ', header: ['System', 'Message'] }, { item: 'network', message: '1GB of data left before limit is exceeded' }, { item: 'file', message: '1GB of storage left before partition is full' }, { item: 'power', message: '5% of battery remains' } ]; let infoData = [{ DOM: '.info', title: 'Updates: ', header: ['Priority', 'Message'] }, { item: 'critical', message: 'Anti-virus update required' }, { item: 'optional', message: 'Media encoding update available' } ]; const logger = array => { let html = ''; let list; for (let [index, object] of array.entries()) { list = $(array[0].DOM); if (index === 0) { list.prev('header').html(`<u><b>${object.title}</b><output>${array.length-1}</output></u><u><b>${object.header[0]}</b><b>${object.header[1]}</b></u>`); } else { html += `<li><b>${object.item}</b><b>${object.message}</b></li>`; } } list.html(html); return false; } logger(failData); logger(warnData); logger(infoData);

 header { margin: 10px 0 -15px; } ul { padding: 5px 0 10px; border: 3px ridge #777; overflow-y: hidden; } ul, header { display: table; table-layout: fixed; width: 90%; } li, u { display: table-row; } b { display: table-cell; width: 50%; border-bottom: 1px solid #000; padding-left:5px } output { display: inline-block; width: 10ch; }

 <main> <section class='logs'> <header></header> <ul class='fail'></ul> <header></header> <ul class='warn'></ul> <header></header> <ul class='info'></ul> </section> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>