How can I add items to a list without innerHTML?

I have an empty ul in html and everytime I add or remove a color I call ShowColors which adds li items via JavaScript using .innerHTML. How can I optimize this code without using .innerHTML?

<!-- language: lang-js -->
const colorList = document.querySelector(".all-colors");

function ShowColors() {
    colorList.innerHTML = savedColorsArray.map(color => `
        <li class="color">
            <span class="rect" data-color="${color}" style="background: ${color};"></span>
        </li>`).join("");
};

<!-- language: lang-html -->

<ul class="all-colors"></ul>

I tried .insertAdjacentHTML but I would have to change how the code works to save each element so I can remove it later and also probably have to save it to localStorage so it's persistent.

<!-- language: lang-js -->
savedColorsArray.forEach(color => {
colorList.insertAdjacentHTML('beforeend', <li class="color">
<span class="rect" data-color="${color}" style="background: ${color};"></span>
</li>);

A modern approach could be a reactive solution with Proxy:
you just modify an array of colors and the list is updated automatically.
You just iterate the color array and try to reuse existing <li>. If there's a <li> with the same index as a color, update it with dataset.color = color and style.background = color. Otherwise create an <li> with innerHTML like you did. The reusing of DOM elements seems like optimization like you requested.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const colorList = document.querySelector(".all-colors");
const deleteItem = item => 
savedColorsArray.splice([...colorList.children].indexOf(item.closest('.color')), 1);
let updatePromise;
let updateCount = 0;
const savedColorsArray = new Proxy([], {
set(target, prop, val){
// postpone in a microtask  
updatePromise ??= Promise.resolve().then(() => {
updatePromise = null;
const log = document.createElement('div');
log.textContent = `updated ${++updateCount}`;
document.querySelector('.log').appendChild(log);
let idx = 0;
const $children = [...colorList.children];
for(const color of target){
let $item = $children[idx++];
if(!$item){
const div = document.createElement('div');
div.innerHTML = `<li class="color">
<span  class="rect" data-color="${color}" style="background: ${color};"><b onclick="deleteItem(this)">✕</b></span>
</li>`;
colorList.appendChild(div.children[0]);
}else{
const $span = $item.querySelector('span');
$span.dataset.color = color;
$span.style.background = color;
}
}
// clear unused items
while(idx < $children.length){
$children[idx++].remove();
}
});
return Reflect.set(target, prop, val);
}
});
savedColorsArray.push(...'red orange yellow lime green blue'.split(' '));

<!-- language: lang-css -->

.color span{
display:block;
height: 30px;
width: 150px;
border-radius:4px;
transition: background .5s;
position:relative;
}
.all-colors{
padding:0;
margin:0;
}
b{
position:absolute;
right:5px;
top:3px;
cursor:pointer;
}
.color{
padding: 5px;
display:block;
list-style:none;
}
body{
display:flex;
gap:30px;
}

<!-- language: lang-html -->

<ul class="all-colors"></ul>
<div>
<input>
<button onclick="document.querySelector('input').value.match(/\w+/g)?.forEach(color => savedColorsArray.unshift(color))">Add color</button>
</div>
<div class="log"></div>

<!-- end snippet -->

.innerHTML should be avoided whenever possible because calling it invokes the HTML parser, which rebuilds the DOM with the new content, so there are performance implications to using it.

While the DOM is being rebuilt with new content, it's very easy to wipe out previously added event handlers, so there is an opportunity to introduce bugs.

It is well known that using .innerHTML can potentially open up a security vulnerability in code as well, when the string that is passed to it is not 100% within the control of the developer.

From MDN:

> Warning: If your project is one that will undergo any form of security
> review, using innerHTML most likely will result in your code being
> rejected. For example, if you use innerHTML in a browser extension and
> submit the extension to addons.mozilla.org, it may be rejected in the
> review process. Please see Safely inserting external content into a
> page for alternative methods.

So, the moral of the story is, only use .innerHTML when you have no other choice. Fortunately, there often are other choices, the first among them being to create new DOM elements, configure them, and then attach them to the DOM.

Here's how that is done:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const colorList = document.querySelector(".all-colors");
function ShowColors() {
// Create a new DOM elements
const li = document.createElement("li");
const span = document.createElement("span");  
// Configure the elements via DOM properties
li.classList.add("color");
span.classList.add("rect");
span.style.backgroundColor = color;
span.dataset.dataColor = color:
// Append the new DOM element to the appropriate parent elements
li.appendChild(span);
colorList.appendChild(li);
};

<!-- end snippet -->