Entrar Ainda não tem acesso?
1
resposta

[SUGESTÃO] Metodo add Li

Referente ao curso JavaScript: explorando a manipulação de elementos e da localStorage, no capítulo Exibindo as tarefas no DOM e atividade Lendo tarefas gravadas

por Guilherme
| 89.1k xp | 2 posts

Usando innerHTML para adicionar os elementos do bloco Li

function criarElementoTarefa(tarefa){ const li = document.createElement("li"); li.classList.add( "app__section-task-list-item"); li.innerHTML = `

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

<p class="app__section-task-list-item-description">
    ${tarefa.descricao}
</p>
<button class="app_button-edit">
    <img src="/imagens/edit.png">
</button>

`; return li; }

1 resposta
por Monalisa Meyrelle de Sousa Silva
| 2780.6k xp | 6197 posts
Alura Scuba Team

Oi, Guilherme! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Sua ideia de usar innerHTML para adicionar os elementos à li está funcionando bem, e ajuda a manter a visualização organizada com o SVG e o botão de edição.

É isso aí! Continue assim!

Uma dica interessante para o futuro é usar createElement para adicionar elementos dinamicamente ao invés de usar innerHTML.Isso ajuda a evitar possíveis falhas de segurança com inserções de HTML não tratado.

Veja este exemplo:


const li = document.createElement("li");
const p = document.createElement("p");
p.textContent = tarefa.descricao;
li.appendChild(p);

Esse código cria os elementos e insere o texto de forma segura e controlada, sem precisar usar innerHTML.

Qualquer dúvida que surgir, compartilhe no fórum. Abraços e bons estudos!

Conteúdos relacionados

O link está em inglês, mas você poderá utilizar a tradução automática do navegador.

Alura

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!