Como adicionar ou excluir elementos HTML através do JavaScript
Este artigo discutirá os procedimentos de adicionar ou excluir o Elementos html através JavaScript. Também demonstraremos o uso dos métodos AppendChild () e InsertBefore () para adicionar os elementos HTML. Além disso, exemplos relacionados aos métodos remover () e removeChild () para excluir os elementos html serão fornecidos a você. Então vamos começar!
Como adicionar elementos HTML através do JavaScript usando o método AppendChild ()
O método JavaScript AppendChild () é utilizado para adicionar um elemento HTML como filho do nó pai especificado. Este método é usado para mover elementos HTML.
Sintaxe do método AppendChild ()
parentnode.ApndendChild (ChildNode);Aqui o parentnode é o elemento html que queremos declarar como pai, enquanto o ChildNode é o elemento HTML recém -criado que será adicionado ao nó pai.
Exemplo: como adicionar elementos HTML através do JavaScript usando o método AppendChild ()
Neste exemplo, mostraremos como usar o “ApndendChild ()”Método para adicionar os elementos HTML através do JavaScript. Primeiro de tudo, adicionaremos um título e um parágrafo usando o
e
Elementos HTML:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Na próxima etapa, criaremos um novo
elemento "parágrafo”Ao utilizar o“createElement ()”Método do objeto de documento:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
Como você pode ver na saída abaixo, um novo elemento HTML é adicionado com o conteúdo do texto “Este é um novo nó”:
Como adicionar elementos HTML através do JavaScript usando o método insertBefore ()
Se você deseja inserir um elemento HTML como um nó infantil antes do nó especificado, você pode invocar o “insertBefore ()”Método JavaScript.
Sintaxe do método InsertMethod ()
parentnode.inserir antes (newNode, existingNode);Aqui o "NEWNODE”É o recém -criado elemento HTML que você deseja adicionar,“ExistingNode”É o elemento antes que você insira seu elemento html e o“parentnode”É o elemento HTML que você especificou como o nó pai.
Exemplo: como adicionar elementos HTML através do JavaScript usando o método insertBefore ()
No exemplo anterior, utilizamos o método AppendChild () para adicionar o novo elemento HTML como o último filho do pai HTML. No entanto, você também pode usar o JavaScript “insertBefore ()”Método para adicionar um elemento HTML antes do elemento especificado. O exemplo abaixo do rumo lhe ensinará o uso de “insertBefore ()”Método.
Em primeiro lugar, adicionaremos um título e alguns parágrafos da seguinte forma:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Em seguida, criaremos um novo elemento “parágrafo”Elemento HTML e, em seguida, defina um nó de texto infantil para ele:
A execução do programa acima dado adicionará o “parágrafo”HTML antes de“P1”:
Como excluir elementos HTML através do JavaScript usando o método Remone ()
O javascript “remover()”O método é usado para excluir o elemento HTML especificado do Modelo de Objeto do Documento (DOM).
Sintaxe do método Remover ()
nó.remover()Aqui, "nó”Representa o elemento HTML que você deseja excluir através do JavaScript.
Exemplo: como excluir elementos HTML através do JavaScript usando o método Remone ()
No ritmo abaixo, adicionamos um elemento html de título, um parágrafo
e um elemento que compreende dois parágrafos e como nós filhos:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Em seguida, adicionaremos um botão e anexaremos um “ONCLICKManipulador de eventos. De acordo com o código a seguir, quando clicaremos no “Remova o elemento”Botão, ele invocará o“MyFunction ()”Método:
No "MyFunction ()”Método, primeiro, utilizamos o“documento.getElementById”Para encontrar o elemento que queremos excluir especificando seu“eu ia”, Então invocaremos o“remover()”Método:
A saída abaixo do rumo significa que “P1”O HTML é excluído do nosso programa JavaScript com a ajuda do“remover()”Função:
Como excluir elementos HTML através do JavaScript usando o Método RemoveChild ()
Em JavaScript, o “removechild ()”É utilizado para excluir um nó HTML infantil específico de um elemento HTML.
Sintaxe do Método RemoveChild ()
parentnode.Removchild (ChildNode)Aqui, o internode é o elemento html que especificamos como um “pai”Node e ChildNode é o elemento HTML que queremos remover do elemento pai.
Exemplo: como excluir elementos HTML através do JavaScript usando o método removeChild ()
Neste exemplo, tentaremos remover o elemento filho do nosso elemento HTML definido:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Para excluir um elemento filho, antes de tudo, você precisa criar um “pai”Elemento HTML e especifique o elemento HTML atuando como pai em seu código JavaScript. No nosso caso, adicionamos “Div1”:
Como você pode ver, o elemento filho do elemento HTML é excluído com sucesso:
Conclusão
Para adicionar um elemento HTML no seu programa JavaScript, você pode usar o método AppendChild () e InsertBefore (), enquanto que para excluir qualquer elemento HTML específico ou um nó HTML filho, Remover () e RemoveChild () são usados de acordo com o seu requisitos. Este artigo discutiu como adicionar ou excluir os elementos html através do JavaScript. Também demonstramos o uso dos métodos AppendChild () e InsertBefore () para adicionar os elementos HTML. Além disso, os exemplos relacionados aos métodos remover () e removeChild () para excluir os elementos HTML também são fornecidos neste artigo.