Entendi como utilizar as duas funções , mas como eu escolho qual usar? Porque o createlement no meu ponte de vista é mais trabalhoso visto que precisamos criar elemento por elemento, adicionar as classes etc..
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Entendi como utilizar as duas funções , mas como eu escolho qual usar? Porque o createlement no meu ponte de vista é mais trabalhoso visto que precisamos criar elemento por elemento, adicionar as classes etc..
Olá, Reverton!
Entendo a sua dúvida em relação ao uso do innerHTML e createElement para manipulação de elementos no JavaScript. Ambas as abordagens têm suas vantagens e desvantagens, e a escolha vai depender do contexto e das necessidades específicas do seu projeto.
A função createElement é útil quando você precisa criar elementos do zero e adicionar atributos e conteúdo a eles de forma programática. Ela permite maior controle sobre a estrutura e o comportamento dos elementos, pois você pode manipular diretamente as propriedades e métodos do objeto criado.
Por outro lado, o innerHTML é mais conveniente quando você precisa adicionar um conteúdo HTML já formatado a um elemento existente. Ele permite que você insira diretamente o código HTML como uma string, sem a necessidade de criar cada elemento separadamente.
No exemplo que você compartilhou, a função criarElementoTarefa utiliza o createElement para criar cada elemento individualmente e, em seguida, adiciona-os à estrutura HTML desejada. Isso permite maior flexibilidade para manipular cada elemento e adicionar classes, atributos e conteúdo específicos.
No entanto, se você já tivesse o código HTML completo e formatado, poderia utilizar o innerHTML para inseri-lo diretamente em um elemento existente, como por exemplo:
const lista = document.getElementById("minha-lista");
lista.innerHTML = `
<li class="app_section-task-list-item">
<svg>
<svg class="app_section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#FFF"></circle>
<path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
</svg>
</svg>
<p class="app_section-task-list-item-description">
Estudando localStorage
</p>
<button class="app_button-edit">
<img src="/imagens/edit.png">
</button>
</li>
`;
Dessa forma, você pode escolher a abordagem que melhor se adequa às suas necessidades e ao contexto do seu projeto. Lembre-se sempre de considerar a legibilidade, manutenibilidade e performance do código ao fazer essa escolha.
Espero ter ajudado e bons estudos!