Carregando...

Criar elementos

Na cortiça da cozinha já há um papel: milk. A lista é #board. Esse papel é um li com id milk. A marcação cabe numa linha só, então não existe nó de texto vazio por causa de uma quebra de linha.
Você quer pôr tea, bread e eggs. Não monte a tag com uma string. document.createElement("li") entrega um li novo que ainda não está no documento. parentElement é null. document.body.contains é false. board.children.length continua 1, porque só o milk está no quadro.
textContent = "tea" escreve a palavra nesse objeto. Não pendura o nó na página.
board.append(tea) coloca no fim da lista. O resultado da chamada é undefined. Não devolve o nó. appendChild devolve esse nó; esta página usa append. prepend põe o pão no começo. insertBefore(eggs, milk) põe os ovos imediatamente antes de milk, e milk já é filho do quadro. A ordem fica bread, eggs, milk, tea. children.length passa a 4.
Um ensaio à parte, só no quadro intacto: createTextNode("salt"). Isso é um nó de texto, não um li. Se você anexar, children.length fica em 1. childNodes.length vai de 1 para 2. nodeType é 3. O último elemento continua milk. A demo da página não anexa o sal.
A linha debaixo do quadro é bread / eggs / milk / 4. tea está na lista, não nessa linha. O 4 é a contagem de elementos. O texto milk continua milk. Aqui você não mexe em propriedade CSS.

Nós novos, não outra demão de tinta

A página anterior escreveu style, setProperty, classList e cssText numa amostra de tinta. Não criou nó. A de antes mudava palavras com textContent, innerHTML e insertAdjacentHTML. Aqui você não atribui style, não analisa uma string HTML e não reescreve a palavra milk. getElementById só entrega o quadro e o item milk. As linhas novas vêm de createElement.

Onde cada nó novo cai

O quadro começa com um li: milk. Leia as linhas na ordem. A linha do sal é um ensaio nesse quadro intacto, antes de existirem tea, bread e eggs. A demo para em insertBefore e não anexa o sal.

📊 Onde cada nó novo cai

Chamada Onde o nó fica Filhos elemento Confusão fácil
createElement("li") em lugar nenhum; parentElement é null continua 1, milk achar que o item já está no quadro
textContent = "tea" ainda em lugar nenhum continua 1 achar que a palavra insere um li
append(tea) no fim; o resultado é undefined 2: milk, depois tea esperar que append devolva o nó
prepend(bread) no começo 3: bread, milk, tea trocar prepend com append
insertBefore(eggs, milk) logo antes de milk 4: bread, eggs, milk, tea uma referência que não é filha do quadro
append(createTextNode("salt")) no quadro intacto nó de texto depois de milk, não um li continua 1 children.length virar 2

createElement monta o nó na memória. O quadro não muda até um método colocar esse nó. children conta só filhos elemento. Um nó de texto está em childNodes e não em children. append e prepend devolvem undefined. appendChild devolve o nó que você passou. append aceita um nó ou uma string; a string vira nó de texto. appendChild aceita um nó, e uma string lança erro. insertBefore precisa de uma referência que já seja filha desse pai. Se você passar null, o nó vai para o fim, a mesma ideia do append. Esta página passa milk, não null. Anexar um nó que já está no quadro move esse nó. Não copia.

O li novo ainda não está no quadro

O arquivo abre com a lista de uma linha. Nada foi criado. As quatro leituras perguntam o nó novo e o quadro, antes do texto e antes de pendurar.

Item solto

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

As saídas são null, false, 1 e uma string vazia. O navegador tem um objeto li de verdade. Ele não tem pai. O único filho elemento continua milk. A palavra milk é desse item antigo, não do novo.

A palavra tea ainda não insere

textContent troca o texto do nó que você já segura. Não é método de inserção. A lista de filhos do quadro não cresce.

Texto, ainda solto

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

As saídas são tea, false e 1. Você lê a palavra no objeto. A página ainda mostra só milk. contains é false porque o nó não está sob o documento.

append põe o chá no fim

append acrescenta o nó como último filho. A variável fromAppend guarda o resultado da chamada, que é undefined, não o li. Depois, o pai é o quadro e o texto do último elemento é tea. A ordem é milk, depois tea.

Anexar o chá

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

As saídas são undefined, true, tea e 2. appendChild(tea) teria mostrado esse mesmo nó. Este trecho não chama appendChild. milk continua o primeiro filho elemento.

prepend e insertBefore definem a ordem

Este trecho começa de novo no quadro original e faz três encaixes. prepend roda quando tea já está no fim, então bread vira o primeiro filho. insertBefore(eggs, milk) usa milk como referência, então eggs fica entre bread e milk. Os quatro textos são bread, eggs, milk, tea.

Encaixar pão e ovos

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

As saídas são bread, eggs, milk e tea. children.length é 4. O índice 1 é eggs, não milk. milk sai do índice 0 para o 2 porque dois itens ficaram na frente. O texto de milk continua a palavra milk.

Um nó de texto não entra em children

Rode este bloco no quadro intacto, a lista original de uma linha, não depois do script da página. createTextNode monta um nó de texto. nodeType 3 significa texto. nodeType 1 seria elemento. children ignora o nó, então o comprimento fica 1. childNodes conta o nó, então esse comprimento vai de 1 para 2. O último elemento continua o item milk. Você pode ver a palavra salt na lista, e mesmo assim não é um li.

Nó de texto sal

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

As saídas são 3, 1, 2 e milk. Uma string passada a append, como board.append("salt"), também vira nó de texto. Não vira li. A demo da página, mais abaixo, não tem essa linha.

Uma linha sob o quadro

O script fica no fim de body, depois que a lista existe. Anexa tea, põe bread na frente e insere eggs antes de milk. Não cria salt. Escreve o índice 0, o 1, o 2 e a contagem de elementos. Não escreve o quarto texto, tea.

Demo da página — quadro

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

A linha fica bread / eggs / milk / 4. A lista em si é bread, eggs, milk, tea. A linha para no terceiro item e depois dá o comprimento, então tea não é o último trecho e o último trecho não é uma palavra. salt não está. O texto do item milk continua milk. A próxima página é de eventos. Ela não traz outro jeito de montar estes nós.

Confira o quadro

  1. Crie o li e leia parentElement, document.body.contains, children.length e textContent. Os valores são null, false, 1 e uma string vazia.
  2. Ponha o texto tea e leia o texto, contains e o comprimento. Os valores são tea, false e 1.
  3. Anexe tea e leia o resultado da chamada, se o pai é o quadro, o texto do último elemento e o comprimento. Os valores são undefined, true, tea e 2. Depois rode o trecho da ordem e leia bread, eggs, milk, tea.
  4. No quadro intacto, anexe o nó de texto sal e leia nodeType, children.length, childNodes.length e o id do último elemento. Os valores são 3, 1, 2 e milk. A linha da página: bread / eggs / milk / 4.

Tropeços deste quadro

A lista ainda abre com milk. A chamada foi o tipo errado de inserção.

  • Esperar que createElement("li") mostre tea no quadro na hora
  • Esperar que textContent = "tea" aumente children.length
  • Esperar que append devolva o li; isso é o que appendChild faz
  • Passar uma string a appendChild; a string cabe em append, e lá vira nó de texto
  • Chamar insertBefore com uma referência que não é filha do quadro
  • Contar o nó de texto sal dentro de children
  • Montar a linha nova com innerHTML; a página de mudar HTML analisava marcação
  • Definir style.color aqui; a página anterior escrevia CSS
  • Ler a linha como bread / eggs / milk / tea
  • Chamar remove ou cloneNode aqui; esta página só acrescenta os três itens

Leve isto

  • createElement("li") monta um item solto: parentElement é null e children.length continua 1
  • textContent = "tea" escreve a palavra e deixa o nó fora do quadro
  • append(tea) põe tea no fim, e o resultado da chamada é undefined
  • prepend(bread) e insertBefore(eggs, milk) produzem a ordem bread, eggs, milk, tea
  • createTextNode("salt") no quadro intacto deixa children.length em 1 e nodeType em 3
  • A linha fica bread / eggs / milk / 4, e o texto milk continua milk

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 48 de 48
Javascript Tutorial