[Sugerencia] Usar `innerHTML` directamente | JS en la Web: Manipulación del DOM con JavaScript | Alura Latam

Para este proyecto generé el siguiente código:

const btnAdd = document.querySelector("[data-form-btn]");

const createTask = (e) => {
  const inputField = document.querySelector("[data-form-input]");
  const list = document.querySelector("[data-list]");
  const task = inputField.value;

  e.preventDefault(); // Prevent page reload
  inputField.value = ""; // Clear input field

  const addCard = `
  <li class="card">
    <div>
      <i class="far fa-check-square icon"></i>
      <span class="task">${task}</span>
    </div>
    <i class="fas fa-trash-alt trashIcon icon"></i>
  </li>`;

  list.innerHTML += addCard;
};

btnAdd.addEventListener("click", createTask);

Es funcional y me parece que es más sencillo de entender. Sin embargo añado el elemento li que compone la tarea a la lista ul concatenándola como innerHTML.

¿Es esta una buena práctica o debería añadir las clases y elementos como en la práctica?

¡Hola Victor!

Usar innerHTML directamente para agregar elementos a una lista ul es una opción válida y funcional. En términos de simplicidad y legibilidad del código, puede ser más sencillo de entender para algunos desarrolladores.

Sin embargo, es importante tener en cuenta que al usar innerHTML para agregar elementos, estás reemplazando todo el contenido existente en la lista y volviéndolo a renderizar. Esto puede tener un impacto en el rendimiento si la lista contiene muchos elementos o si hay otros elementos dentro de la lista que no deseas reemplazar.

Una alternativa a considerar es utilizar el método appendChild() para agregar elementos de manera más eficiente y sin afectar el contenido existente en la lista. Por ejemplo:

const addCard = document.createElement("li");
addCard.classList.add("card");

const cardContent = document.createElement("div");
const checkIcon = document.createElement("i");
checkIcon.classList.add("far", "fa-check-square", "icon");

const taskSpan = document.createElement("span");
taskSpan.classList.add("task");
taskSpan.textContent = task;

const trashIcon = document.createElement("i");
trashIcon.classList.add("fas", "fa-trash-alt", "trashIcon", "icon");

cardContent.appendChild(checkIcon);
cardContent.appendChild(taskSpan);
addCard.appendChild(cardContent);
addCard.appendChild(trashIcon);

list.appendChild(addCard);

Esta forma de agregar elementos a la lista te permite tener más control sobre la estructura y los estilos de cada elemento individualmente, sin afectar el contenido existente.

En resumen, usar innerHTML directamente es una opción válida y sencilla, pero si quieres tener más control sobre la estructura y los estilos de cada elemento, puedes considerar utilizar appendChild(). La elección depende de tus preferencias y de las necesidades específicas de tu proyecto.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)