Dúvida - Teria outra forma de fazer? | JavaScript: manipulando objetos

Olá pessoa, tudo bom? Eu tenho uma dúvida: teria outra forma de fazer essa parte do ${index != itemAEditar ? 'disabled' ? Como por exemplo usar um classList.add ou remove? Sem mexer diretamente no HTML...

} else {

            ulItens.innerHTML += `
        <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
        <div>
            <input type="checkbox" class="is-clickable" />
            <input type="text" class="is-size-5" value="${elemento.valor}" ${index != itemAEditar ? 'disabled' : ' '}></input>
        </div>

        <div>
            ${ index == itemAEditar ? '<button onclick="salvarEdicao()"><i class="fa-regular fa-floppy-disk is-clickable"></i></button>':'<i class="fa-regular is-clickable fa-pen-to-square editar"></i>'}
            <i class="fa-solid fa-trash is-clickable deletar"></i>
        </div>
    </li>
        `
        }

Obrigada!!

Olá! Sim, é possível utilizar JavaScript para adicionar ou remover classes sem mexer diretamente no HTML. Nesse caso, você pode usar a propriedade classList dos elementos HTML para adicionar ou remover classes dinamicamente. Aqui está um exemplo de como você pode fazer isso no trecho de código que você forneceu:

} else {
    const li = document.createElement('li');
    li.classList.add('item-compra', 'is-flex', 'is-justify-content-space-between');
    li.setAttribute('data-value', index);

    const div1 = document.createElement('div');

    const checkbox = document.createElement('input');
    checkbox.setAttribute('type', 'checkbox');
    checkbox.classList.add('is-clickable');
    div1.appendChild(checkbox);

    const inputText = document.createElement('input');
    inputText.setAttribute('type', 'text');
    inputText.setAttribute('class', 'is-size-5');
    inputText.setAttribute('value', elemento.valor);
    
    // Adiciona a classe 'disabled' ao inputText se index for diferente de itemAEditar
    if (index != itemAEditar) {
        inputText.setAttribute('disabled', '');
    }

    div1.appendChild(inputText);
    li.appendChild(div1);

    const div2 = document.createElement('div');

    // Adiciona o botão de salvar edição apenas se index for igual a itemAEditar
    if (index == itemAEditar) {
        const saveButton = document.createElement('button');
        saveButton.setAttribute('onclick', 'salvarEdicao()');
        saveButton.innerHTML = '<i class="fa-regular fa-floppy-disk is-clickable"></i>';
        div2.appendChild(saveButton);
    } else {
        const editIcon = document.createElement('i');
        editIcon.setAttribute('class', 'fa-regular is-clickable fa-pen-to-square editar');
        div2.appendChild(editIcon);
    }

    const deleteIcon = document.createElement('i');
    deleteIcon.setAttribute('class', 'fa-solid fa-trash is-clickable deletar');
    div2.appendChild(deleteIcon);

    li.appendChild(div2);

    ulItens.appendChild(li);
}

Este código cria elementos HTML dinamicamente em vez de usar a string de template, e adiciona ou remove classes e atributos com base nas condições. Isso permite maior flexibilidade e controle sobre a manipulação do DOM.