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..
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!