JavaScript Anexar dados à div
Como anexar dados à div em javascript?
As abordagens a seguir podem ser utilizadas para anexar dados à div em JavaScript:
- ““Innerhtml" propriedade.
- ““insertadjacenthtml ()”Método.
- ““ApndendChild ()”Método.
- ““jQuery" abordagem.
Abordagem 1: Anexar dados à div em JavaScript usando a propriedade InnerHTML
O "Innerhtml”Propriedade retorna o conteúdo HTML interno do elemento.Essa abordagem pode ser aplicada para anexar dados à imagem e botão incluídos no “div”Elemento no botão Clique.
Sintaxe
elemento.InnerhtmlNa sintaxe dada:
- ““elemento”Refere -se ao elemento ao qual o conteúdo HTML será devolvido.
Exemplo
Vamos dar uma olhada nas seguintes linhas de código:
No código acima:
- Especifique o "div”Elemento com o especificado“eu ia”.
- Depois disso, inclua uma imagem no elemento div.
- Além disso, crie um botão dentro do elemento div ter um anexo “ONCLICK”Evento redirecionando para a função AppendData ().
Passe para a parte JavaScript do Código:
Na parte JS do código, siga as etapas declaradas abaixo:
- Declare uma função chamada “AppendData ()”.
- Em sua definição, acesse o “div”Elemento de seu ID usando o“documento.getElementById ()”Método.
- Finalmente, aplique o “Innerhtml”Propriedade para anexar a mensagem declarada junto com a imagem incluída e o botão criado no“div”.
Saída
Pode ser observado na saída acima que a mensagem declarada é anexada com a imagem no botão Clique.
Abordagem 2: Anexar dados à div em JavaScript usando o método insertadjacenthtml ()
O "insertadjacenthtml ()”O método insere dados HTML na posição especificada.Este método pode ser utilizado para anexar os dados no final do “div”Ao selecionar uma opção específica.
Sintaxe
elemento.insertadjacenthtml (posição, html)Na sintaxe acima:
- ““posição”Refere -se à posição em relação ao elemento.
- ““html”Aponta para o HTML a ser inserido.
Exemplo
Dê uma olhada no seguinte snippet de código:
JavaScript é uma linguagem de programação?
Sim
Não
No código HTML acima:
- Repita as etapas discutidas para incluir o “div”Elemento com o especificado“eu ia”.
- Além disso, inclua o cabeçalho especificado no “" marcação.
- Depois disso, inclua dois “rádio”Botões com um invocando a função APENDDATA (). Isso resultará em anexar os dados apenas ao selecionar a opção "Sim”.
Passe para a parte JavaScript do Código:
No código JS acima, siga estas etapas:
- Declare uma função chamada “AppendData ()”.
- Em sua definição, acesse o “div”Elemento da mesma forma usando o“documento.getElementById ()”Método.
- Por fim, aplique o “insertadjacenthtml ()”Método especificando o“posição”Como seu primeiro parâmetro a anexar os dados especificados. Nesse cenário, os dados serão anexados no final.
Saída
Na saída acima, é evidente que o “sucesso”A mensagem é anexada apenas ao clicar na opção“Sim”.
Abordagem 3: Anexar dados à div em JavaScript usando o método AppendChild ()
O "ApndendChild ()”Método anexa um elemento de nó como o último filho do elemento. Essa abordagem pode ser utilizada para anexar os dados da mesma forma no final do botão Clique.
Sintaxe
elemento.AppendChild (nó)Na sintaxe dada:
- ““nó”Indica o nó a ser anexado.
Nota: Um método adicional “CreateTextNode ()”Também será aplicado no exemplo abaixo. É simplesmente aplicado para criar um nó de texto.
Exemplo
Vamos seguir o exemplo abaixo do ritmo abaixo passo a passo:
JavaScript
No código HTML acima:
- Lembre -se das abordagens discutidas para incluir o “div”Elemento com o especificado“eu ia”E um título.
- Da mesma forma, inclua um botão com o “ONCLICK”Evento anexado, que será redirecionado para a função AppendData ().
Vamos seguir a parte JavaScript declarada do código:
Nesta parte do código, execute as seguintes etapas:
- Defina uma função chamada “AppendData ()”.
- Em sua definição, da mesma forma, acesse o “div”Elemento como discutido.
- Na próxima etapa, aplique o “CreateTextNode ()”Método para criar o nó de texto especificado.
- Finalmente, anexe o nó de texto criado no final do “div”.
Saída
Na saída, é evidente que o parágrafo resultante é anexado ao “div”Após o botão Clique.
Abordagem 4: Anexar dados à div em JavaScript usando a abordagem jQuery
O "jQuery”A abordagem pode ser utilizada para acessar o“div”Elemento diretamente e anexa um título nele (div) no botão Clique.
Exemplo
Vamos seguir o exemplo abaixo do ritmo abaixo passo a passo:
O conteúdo deste site é:
No código acima, siga as etapas declaradas abaixo:
- Inclua a biblioteca jQuery para aplicar seus métodos.
- Reviver as etapas para especificar o “div”Elemento com o especificado“eu ia”.
- Dentro do "div”, Inclua o cabeçalho declarado e um“botão" com um "ONCLICKEvento invocando a função appenddata ().
Vamos continuar até a parte JavaScript do Código:
Na parte JS acima do código, execute as seguintes etapas:
- Defina uma função chamada “AppendData ()”.
- Em sua definição, acesse o elemento div diretamente por seu “eu ia”.
- Depois disso, aplique o “acrescentar()”Método para o acessado“div”E inclua o cabeçalho declarado nele.
Saída
Na saída, o botão clique em Leva para anexar o cabeçalho resultante no “div”.
Este artigo demonstrou as abordagens para anexar dados à div em javascript.
Conclusão
O "Innerhtml”Propriedade, a“insertadjacenthtml ()”Método, o“ApndendChild ()”Método ou o“jQuery”A abordagem pode ser utilizada para anexar dados à div em JavaScript. A propriedade InnerHTML pode ser utilizada para anexar os dados à imagem incluída e um botão no “div”Elemento no botão Clique. O método insertadjacenthtml () pode ser aplicado para anexar os dados em relação à posição especificada como seu parâmetro. O método AppendChild () em combinação com o “CreateTextNode ()”O método pode ser utilizado para criar um nó de texto primeiro e depois anexá -lo ao final da div. A abordagem do jQuery pode ser usada para buscar o elemento div e anexar um título nele no botão Clique. Este blog explicou para anexar dados à div em JavaScript.