<div class='test'>  
</div>

const colors = ['color1', 'color2', 'color3'];

const div = document.querySelector('.test');
// Создаю список и помещаю его в  div
const ul = document.createElement('ul');

div.append(ul);

//Функция чтобы вешать события редактирования по клику
const addEditListener = el => {
  el.addEventListener('click', function func() {
        const input = document.createElement('input');
        input.value = el.textContent;  // записываем в инпут текст абзаца
        el.textContent = '';
        el.appendChild(input);
        //автоматически ставим фокус
        input.focus();
        input.addEventListener('blur', function () {
            el.textContent = this.value;
            el.addEventListener('click', func)  // повесим событие обратно
        })
        el.removeEventListener('click', func)   // отвяжем событие
    })
}

//Функция заполнения элемента дочерними цветами
const createColorsList = (parent, colors) => {
  colors.forEach(function (elem) {
    const li = document.createElement('li');
    li.textContent = elem;
    parent.append(li);
    addEditListener(li);
  })
}

createColorsList(ul, colors);

const but2 = document.createElement('input');
but2.type = 'button'
but2.value = 'Кнопка для добавления списка';
div.appendChild(but2);


but2.addEventListener('click', function () {
    let li = document.createElement('li');
    li.textContent = "new element";
    ul.append(li);
    addEditListener(li);
})