Como anexar uma criança em Dom usando o método AppendChild em JavaScript?

Se você deseja alterar qualquer elemento no HTML usando o idioma de script, você deve se referir ao DOM, também conhecido como Modelo de Objeto de Documento. Dom em seu núcleo é uma interface de programação simples para esse arquivo html ou, em outras palavras, para a página da web específica. Nenhuma linguagem de script é de qualquer utilidade sem uma interface DOM quando se trata de manipular elementos HTML.

Uma das manipulações mais comuns da página da web é substituir um nó ou adicionar um nó filho dentro de um nó pai. Isso pode ser feito através do ApndendChild () Método em JavaScript.

O que é .Método AppendChild ()

O .ApndendChild () O método é uma função JavaScript embutida que é usada para adicionar um nó infantil sob um nó dos pais. O .ApndendChild () executa esse feito fazendo uso do Interface do nó dom. Agora estamos familiarizados com o que faz, então vamos examinar sua sintaxe.

Sintaxe de .Método AppendChild ()

A sintaxe de .ApndendChild () é bastante auto-explicativo. É como:

parentnode.ApndendChild (ChildNode);

Como você pode ver claramente, consiste no seguinte:

• parentnode: O elemento em que o outro nó deve ser anexado.
• ChildNode: O elemento a ser anexado.

Quando é o método AppendChild () usado

O .ApndendChild () anexa um elemento recém -criado dentro do DOM. Também é usado quando você precisa reorganizar um elemento já existente. Na maioria dos casos, ambos os recursos, reorganizando os elementos existentes e criando um novo elemento e, em seguida, adicioná -lo ao DOM é feito em um evento invocado devido à interação do usuário com a página da web. Este evento pode estar clicando em um botão na tela, um local específico do mouse ou até mesmo um golpe de chave específico.

Exemplo

Não podemos aprender nada até tentarmos. Então, vamos tentar usar o .ApndendChild () método. Nós devemos:

• Crie uma página HTML com um nó pai
• Crie um botão que invocará o processo de anexo
• Crie um nó filho.
• Anexar o nó filho no nó pai no botão pressionar.

Vamos começar com o primeiro passo que é configurar uma página HTML. Criar um nó pai criando um div com um id = “demonstração”: Dentro desta div, damos um nó infantil que é um

marcação:

Este é o parágrafo 1 dentro da tag "div"

Vamos fazer o nó pai que é no nosso caso o

Tag um pouco proeminente também, dando -lhe uma cor de fundo. Para fazer isso, use o id = "demonstração" e dê alguns estilistas de CSS com as seguintes linhas

Teremos os seguintes resultados.

Agora sabemos que o nó pai de

A tag é destacada. Se adicionarmos algum nó filho dentro deste nó pai, a área destacada aumentaria.

Voltando a anexar um nó filho. Vamos criar um gatilho para anexar um nó filho e, para esse fim, adicionaremos um botão na tela com a seguinte linha:

Clique para ApndendChild

Com isso, nossa saída se torna:

Precisamos declarar a função que anexará um nó filho dentro do div em cada botão pressionar. Crie a função como esta:

deixe o contador = 2;
função btnclicked ()
// Adicione o código posterior aqui.

Como você pode notar, criamos uma variável chamada "contador". Esta variável manterá um verificação de quantos nós filhos nós anexamos no nó pai. Já que já temos um

marcação Como o primeiro filho, começamos o balcão de "2".

Agora precisamos de um nó infantil. Para isso, vamos criar um

marcação com algum texto dentro dele. Para criar um

tag, primeiro precisamos criar um TextNode e a Nó do parágrafo e depois anexar o nó de texto no

marcação nó.

Criar uma TextNode com o seguinte comando:

textNode = Document.CreateTextNode ("Este é o parágrafo" + contador + 'dentro de "Div" Tag ");

Como você pode ver, estamos usando o valor do contador para levar o usuário a quantos nós filhos estão presentes no nó dos pais.

Em seguida é criar o

elemento de tag:

PTAG = documento.createElement ("P");

Agora, precisamos adicionar o TextNode no ptag:

ptag.appendChild (textNode);

Por fim, precisamos anexar isso ptag dentro de div com o id = "demonstração":

parentnode = document.getElementById ("Demo");
parentnode.ApndendChild (PTAG);

Antes de sair do btnclicked () função, precisamos aumentar o valor do contador também:

contador ++;

O trecho de código completo será assim:

Hora de finalmente executar nossa página da web e olhar para os resultados. Você deve ver isso na sua tela:

Aí está, nós anexamos com sucesso vários nós filhos dentro de um nó dos pais. Também podemos confirmá -lo examinando o nó pai dentro das ferramentas de desenvolvedor do navegador.

Podemos ver claramente que todos os nós da criança (

tags) são realmente anexos ao div com o id = "demonstração".

Conclusão

O .ApndendChild () O método de javascript é usado para anexar um nó filho dentro de um nó pai com a ajuda da interface do nó DOM. Manipular os elementos da página da web usando uma linguagem de script é uma tarefa importante. Uma das tarefas comuns ao manipular páginas da web é anexar elementos como nós filhos a outros elementos. Aprendemos como o .ApndendChild () o método funciona, sua sintaxe e quando é usado. Criamos uma página da web html, um nó dos pais e anexamos nós filhos dentro dela usando o .ApndendChild () função.