Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Duvidas a respeito do InnerHTML/InnerText/

Bom dia!

Escrevi o código abaixo enquanto estudava, no entanto surgiu uma dúvida, quando usar o innerHTML, como mostrado no curso e quando utilizar o innerText como esta no meu código?

Entendo que o innerHTML vai inserir as tags que eu solicitar, por outro lado, se eu utilizar a mesma lógica do LI e criar um P e transformar ambos com appendChild o resultado seria o mesmo.

É questão de qualidade de escrita/semantica?

const createTask = (event) => {

    event.preventDefault()

    const list = document.querySelector('[data-list]')
    const input = document.querySelector('[data-form-input]')
    const valor = input.value

    const task = document.createElement('li')
    task.classList.add('content')

    const content = document.createElement('p')
    content.classList.add('task')
    content.innerText = valor

    task.appendChild(content)

    list.appendChild(task)

    input.value = " "


}

const createNewTask = document.querySelector('[data-form-button]')

createNewTask.addEventListener('click', createTask)
1 resposta
solução!

Oi Pedro!

Muito legal o seu questionamento!

Entendo que o innerHTML vai inserir as tags que eu solicitar, por outro lado, se eu utilizar a mesma lógica do LI e criar um P e transformar ambos com appendChild o resultado seria o mesmo.

Seu pensamento está certíssimo!

O seu código e do instrutor seguem os mesmos passos:

  1. criar o elemento <p>
  2. incluir o valor como texto
  3. adicionar <p> como filho de task

Neste caso, usar innerHTML ou innerText ou até mesmo innerContent, se seguir os passos acima, terão o mesmo resultado. Existem algumas pequenas diferenças quando queremos acessar os valores destas propriedadades, como exemplificado de uma maneira muito legal neste outro tópico do fórum.

Apesar do resultado ser o mesmo, a sintaxe utilizada pelo instrutor é a que eu prefiro pessoalmente

const conteudo = `<p class="content">${valor}</p>`

Pois o React, que é um framework de javascript para construção de aplicações web, utiliza uma sintaxa muito parecida (JSX).

Parabéns pela reflexão e continue assim! São essas perguntas que nos fazem evoluir mais rápido!

Espero ter ajudado! Se tiver mais alguma dúvida, pode postar aqui! :)