O Innerhtml pode ser utilizado para escrever o documento html dinamicamente. É implantado principalmente para gerar documentos dinâmicos HTML, incluindo formulários de comentários, formulários de registro, links e muito mais. Além disso, você também pode substituir o INNERHTML dentro de uma div pelo JQuery. Para fazer isso, o “.html ()”A função é utilizada. Quando você clica no botão Depois que o site é carregado, o conteúdo dentro da div será modificado com o conteúdo da função html ().

Este artigo demonstrará substituir o inerhtml de uma div, utilizando jQuery.

Como substituir o InnerHtml de um div usando o jQuery?

Para substituir o iNnerHTML de um contêiner de div, utilizando jQuery, siga o procedimento abaixo da estado.

Etapa 1: Crie um contêiner principal “div”

Inicialmente, crie o principal contêiner "div" usando o "”Elemento e adicione um ID dentro da etiqueta de abertura“ div ”com um nome específico.

Etapa 2: Adicionar títulos

Em seguida, use qualquer tag de título de “H1" para "H6”Para adicionar um título a uma página HTML. Por exemplo, utilizamos “H1”Para o cabeçalho principal e“H2”Para o segundo título. Você também pode definir o estilo embutido dentro da tag de título.

Etapa 3: faça outro contêiner de div

Depois disso, faça outro contêiner div seguindo o mesmo método na etapa anterior.

Etapa 4: Crie um botão

Em seguida, adicione um botão com a ajuda do “" elemento. Além disso, adicione um “aula”Atributo dentro da tag de abertura da div e atribui dois ou mais nomes de classe a este atributo. O "tipo”O atributo é usado para especificar o tipo do elemento. Então, incorpore texto entre o “botão”Elemento a ser exibido no botão:

Linuxhint Ltd UK

Primeiro conteúdo sem qualquer alteração

A saída do bloco de código acima é declarada abaixo:

Etapa 3: aplique CSS no contêiner "div"

Acesse o segundo “div“Contêiner com a ajuda do nome da classe“.segunda div”:

.Segunda Div
Alinhamento de texto: centro;

Depois de acessar o contêiner Div, aplique o “alinhamento de texto”Propriedade do CSS que é utilizado para definir o alinhamento do texto.

Saída

Etapa 4: Insira a biblioteca jQuery

Adicionaremos a biblioteca jQuery inserindo o seguinte link dentro da tag entre o elemento principal do arquivo html:

Etapa 5: Substitua Innerhtml de Div

No "”Tag, adicione o seguinte código:

No trecho de código acima:

• • Defina a "preparar()”Função que será executada apenas assim que o Modelo de Objeto do Documento da Página (DOM) estiver pronto para que o código JavaScript seja executado.
  • Faça uma função para o elemento do botão para executar a ação quando o usuário acertar nele.
  • Agora o "& (seletor).html ()”A função é utilizada para substituir o Innerhtml da div. Para fazer isso, adicione os dados dentro do “()”Para substituir.

Pode -se observar que o iNnerHTML da div foi alterado quando o botão é clicado:

Você aprendeu sobre a substituição do inerhtml de um div usando o jQuery.

Conclusão

Para substituir o inerhtml de um div usando jQuery, primeiro, insira um link da biblioteca jQuery na tag de script com a ajuda do “src”Atributo. Então o "html ()”A função é usada como“& (seletor).html”. Para fazer isso, o “$ ("#First-Div").html”É utilizado neste cenário. Este artigo explicou o método para substituir o iNnerHTML de um contêiner div utilizando jQuery.