Adicionar Javascript

Michael Zippo

O método JavaScript appendChild() adiciona um elemento ao final de um nó. appendChild() é frequentemente usado para adicionar

elementos a uma lista. Você deve usar várias instruções appendChild() se quiser adicionar mais de um item a um nó.

Algumas listas contêm texto ; outros diretórios contêm imagens; outras listas contêm itens da web personalizados. Independentemente do conteúdo de uma lista, uma coisa é certa: as páginas da Web estão cheias de listas.

Quando você cria uma lista, geralmente codifica seus valores ‚Äã‚Äãem HTML. Este processo pode ser acelerado usando um método chamado JavaScript appendChild. Este método permite que você adicione um item ao final de uma lista ou outro item da web, como uma citação em bloco.

Neste guia, falaremos sobre o que appendChild ( ) está em JavaScript e como funciona. Veremos um exemplo para você começar. Vamos começar!

O que é appendChild JavaScript?

appendChild () anexa um nó no final de um nó pai. appendChild() é comumente usado para adicionar itens a uma lista HTML. Um nó se refere a qualquer elemento do HTML Document Object Model (DOM).

A sintaxe de appendChild () se parece com isso:

"pai" refere-se ao elemento ao qual você deseja adicionar um filho. "Filho" é o item que você deseja adicionar no final do pai.

Você deve usar um método como JavaScript getElementById () ou outro "Get" para recuperar um elemento. Como alternativa, você pode criar um elemento HTML em JavaScript e usar esse elemento como um objeto "pai" com appendChild ().

Por exemplo, uma lista de receitas de bolinhos seria contém uma lista de nós. Esses nós provavelmente seriam

porque criaríamos uma lista.

Um pai

Configurando um front-end

Para primeiro, colocaremos uma interface básica exibindo nossa lista de nomes de alunos. Abra um arquivo chamado index.html e cole este código:

Criamos um documento HTML básico. Este documento contém um título e uma lista sem subelementos. A lista é representada pela tag
.
Agora vamos adicionar alguns estilos para nossa página em um arquivo chamado styles.css para melhorar a estética do nosso web pa ge:

Esta regra CSS irá definir uma cor de fundo cinza claro para nossa página. Para fazer isso, usamos a propriedade CSS background-color . Ele também move o conteúdo da tag para o centro da página. Para saber mais sobre como estruturamos o layout, confira nosso Guia para modelos de caixa CSS .
Nossa página ainda não está funcionando. Não adicionamos nada à lista. Isto é o que nossa página parece quando você abri-lo em um navegador:

const student = document.querySelector (" ul ");

Esta linha de código irá selecionar o item em nosso page com a tag
Isso representa nossa lista. Em seguida, criaremos um item para adicionar à nossa lista:

T seu código cria um nó de texto com uma tag
que contém a palavra "Steven". Agora só precisamos adicionar nosso item recém-criado à nossa lista.

Adicionar Javascript

O que é appendChild JavaScript?

Configurando um front-end

Usando o método JavaScript appendChild()