Alterar o HTML

Um bilhete de balsa já está na página: o barco se chama Gull, a hora é 09:10 e a nota diz Boarding. Alterar o HTML é escrever conteúdo novo num elemento que você já tem. boat.textContent = "Heron" guarda as palavras Heron. note.textContent = "<em>Late</em>" mostra esses caracteres, e note.querySelector("em") é null. note.innerHTML = "<em>Late</em>" monta um em cujo texto é Late. Depois disso, note.textContent é Late, enquanto note.innerHTML ainda traz as marcas. Uma segunda escrita, note.innerHTML = "Dock 2", apaga o em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") mantém Dock 2 e acrescenta gate B, então a nota fica Dock 2 gate B. Nada atribui a hora, então ela continua 09:10.

Escrever, não procurar de novo

A página anterior comparou jeitos de achar um nó. Esta não conta uma coleção, não lê um índice e não percorre parentElement. getElementById só entrega o bilhete. A lição é o valor que você atribui.

O que cada escrita deixa na nota

A nota começa como Boarding. Leia as linhas em ordem. Cada atribuição substitui a nota ou a alonga.

textContent guarda uma string e não interpreta marcas. innerHTML interpreta marcas e joga fora cada filho que o elemento já tinha. insertAdjacentHTML também interpreta marcas, mas beforeend coloca os nós novos depois do conteúdo atual. O nome de um barco digitado no guichê vai em textContent. A mesma string em innerHTML trataria um sinal de menor como marcação.

Leia o bilhete antes de escrever

O arquivo abre com três valores. Nenhuma atribuição rodou ainda.

Os registros são Gull, 09:10 e Boarding. A hora é um parágrafo à parte. As escritas seguintes não tocam when.

Palavras continuam palavras

textContent troca cada filho por um nó de texto. Caracteres que parecem uma marca continuam caracteres.

A primeira linha é Heron. A segunda são os caracteres <em>Late</em>. A terceira é null. A nota mostra a marca como texto e não construiu um elemento.

innerHTML constrói o elemento

Entregue esses mesmos caracteres a innerHTML. O analisador vira nós e substitui o que a nota tinha.

A primeira linha é Late. A segunda é <em>Late</em>, porque innerHTML devolve a marcação, marcas incluídas. A terceira é false: o em está lá, então não é null. As palavras visíveis e a string de marcação são duas leituras do mesmo elemento.

O innerHTML seguinte apaga o em

Um valor novo de innerHTML substitui a nota inteira. O em não fica ao lado do texto novo.

A primeira linha é Dock 2. A segunda é null. Boarding já tinha ido. Esta escrita leva o em também.

Acrescente gate B e mantenha Dock 2

insertAdjacentHTML("beforeend", ...) analisa um fragmento e o põe no fim. Esta string começa com um espaço, para as duas partes continuarem duas palavras. Outras posições existem. Esta página usa só beforeend.

A primeira linha é Dock 2 gate B. A segunda é gate B. Dock 2 ainda está na nota. Atribuir a mesma string do span com innerHTML teria apagado Dock 2.

Uma linha sob o bilhete

O script fica no fim de body, depois que o bilhete existe. Ele guarda a palavra Late antes de Dock 2 substituir o em, e então escreve uma linha com o barco, essa palavra guardada e a nota depois de gate B.

A linha lê Heron / Late / Dock 2 gate B. A hora ainda lê 09:10. Late na linha é a palavra guardada antes da limpeza. A própria nota já não diz Late. A página seguinte muda o CSS de elementos como estes e não traz outro jeito de escolhê-los.

Confira o bilhete

1. Mostre os três textos iniciais e espere Gull, 09:10 e Boarding
2. Ponha o barco em Heron e a nota nos caracteres em; espere essa string e um em null
3. Ponha innerHTML na string em; espere textContent Late, innerHTML ainda com as marcas, e um em que não é null
4. Ponha innerHTML em Dock 2 e espere null para em
5. Acrescente o span com beforeend e espere Dock 2 gate B, depois o texto do span gate B
6. Leia a linha e espere Heron / Late / Dock 2 gate B; leia a hora e espere 09:10

Deslizes neste bilhete

A página abre mesmo assim. A atribuição escreveu o tipo errado de valor.

• Colocar em innerHTML um nome digitado no guichê, onde < vira marcação
• Esperar que textContent = "<em>Late</em>" crie um em
• Ler textContent depois de escrever o em e esperar as marcas nessa string
• Atribuir innerHTML de novo e esperar que o em fique
• Acrescentar gate B com innerHTML e perder Dock 2
• Tirar o espaço inicial, de modo que a nota fique Dock 2gate B
• Definir style aqui; a página seguinte muda o CSS
• Chamar createElement aqui; uma página adiante cria nós novos

Leve isto

• textContent escreve texto simples e não interpreta marcas
• innerHTML interpreta marcas e substitui cada filho
• Depois de escrever o em, textContent é Late e innerHTML ainda contém as marcas
• Um segundo innerHTML apaga o em
• insertAdjacentHTML("beforeend", ...) acrescenta marcação e mantém Dock 2
• A hora fica 09:10 porque nada a atribui
• A linha lê Heron / Late / Dock 2 gate B