Método HTML-Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

O jQuery oferece muitos métodos para ajudar os desenvolvedores a criar uma experiência web dinâmica com eficiência. O método jQuery html() substitui todo HTML no elemento selecionado. Isso é útil se você deseja alterar dinamicamente o que o usuário vê após interagir com a página.

Neste guia, aprenderemos como usar html() e sua sintaxe. Também adotaremos uma abordagem passo a passo para usar html(). jQuery html() é um método fundamental da biblioteca jQuery e é frequentemente usado. Depois de aprender o básico, você estará pronto para começar a praticar com html().

O que é jQuery html ()?

jQuery html() define o conteúdo HTML de cada elemento em um conjunto de elementos correspondentes. Deve-se tomar cuidado para fornecer uma consulta suficientemente precisa para substituir apenas o HTML desejado.

Somente o conteúdo é editado com html (). Se houver uma folha de estilo, o novo conteúdo terá o mesmo estilo do conteúdo anterior. Também vale a pena mencionar que html() só funciona em documento HTML - não funciona com XML.

Sintaxe html () jQuery

Lembre-se que Os métodos jQuery são chamados primeiro em um seletor. O seletor pode ser tão grande quanto uma tag

ou tão específico quanto ). Uma vez selecionado o elemento desejado, podemos chamar html() e passar uma string HTML como parâmetro para html(). Para obter uma explicação detalhada dos seletores CSS, consulte nosso guia .

html () aceita um string literal como um parâmetro ou uma variável contendo a string. Passar uma string literal de "Novo conteúdo" será renderizado como passar uma variável referente a "Novo conteúdo".

Suponha que temos este simples

Podemos substituir toda a

tag:

O código acima mostra o novo HTML como:

Se houver fosse um estilo associado à tag

original , ele não estaria mais ativo com o novo conteúdo. Também é possível passar uma string simples:

Nosso código HTML agora é o seguinte:

Podemos ver que há algumas diferenças no novo conteúdo. Passar uma string literal é uma ótima maneira de manter o estilo do conteúdo anterior. Lembre-se de que uma string literal é apenas uma string contendo caracteres. Se o novo conteúdo for um elemento filho, usar uma string HTML permite que você faça isso.

Agora que a sintaxe básica foi abordada, vamos dar uma olhada em um exemplo.

p>

Exemplo jQuery html()

Vimos como html() substitui o conteúdo no elemento selecionado em nosso exemplo "Novo conteúdo" . Isso pode ser feito passando uma string literal ou uma string HTML como parâmetro. Vamos dar uma olhada em um exemplo onde mantemos o estilo original.

Olhando para nossa página HTML inicial, veremos apenas a palavra "Olá" estilizada com a cor azul.

Neste exemplo, queremos para substituir a palavra "Olá" por um novo conteúdo, mantendo o estilo original. Para isso, selecionamos o parágrafo com o nome da classe azul.

Selecionamos o parágrafo pertencente à classe azul e substituímos "Hello" por "Hello AGAIN". Como html() substitui o conteúdo incluído nos nomes dos elementos, a cor azul permanecerá.

< Figure class = "wp-image-block"> A83aaFCGA71IBKWgL4WyaFqn GeP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD 5iatEp Im3xzfqRKD35rOb9xjhLoN1Na

E se queremos substituir todo o texto no parágrafo ? Se selecionarmos o elemento

, ele substituirá o texto acima por três instâncias de " Hello AGAIN. ‚"

Aqui selecionamos o parágrafo inteiro de tags no arquivo HTML e substituimos o conteúdo de cada um por "Olá de novo". ou colocar pe conteúdo envelope nestas tags.

2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q Ddxef0zLi8sxC1Lt4N3 HIOZpbIRtU1eFIP0y8qbPJcTc1kvB4Pc5Ti1CUpWDSZktp3v6zyCo7fIavTM

Assim como esperávamos. vamos subir um nível na nossa seletor para nosso  JXF9suUYnrtQvrU 8sIs3 NEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj Ol64YUdUPWEKZYgZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XGT XGT Ol64YUdUPWEKZYXX6D tem o nosso elemento>. </p Saber como <code> html () </code>, pode-se inferir que o código acima - acima substitua as três <p>tags pela que foi passada como parâmetro. Leia nosso <a href= guia sobre como aprender HTML para saber mais sobre as

Em uma linha de código, substituímos três elementos de parágrafo diferentes e usamos nosso próprio estilo de classe original .

Conclusão

jQuery html () é um método comumente usado para substituir o conteúdo de páginas HTML para criar uma experiência dinâmica. e html() substitui o conteúdo incluído em elementos HTML, é importante ter cuidado com seletores e classes de estilo jQuery. Isso evitará qualquer mudança de estilo indesejada.

Aprendemos o que é jQuery, sua sintaxe e um exemplo de uso. Passe algum tempo praticando e desenvolvendo esse método amplamente utilizado.