jQuery - Manipulação DOM

JQuery fornece métodos para manipular DOM de maneira eficiente. Você não precisa escrever um grande código para modificar o valor de qualquer atributo de elemento ou para extrair o código HTML de um parágrafo ou divisão.

JQuery fornece métodos como .attr (), .html () e .val () que atuam como getters, recuperando informações de elementos DOM para uso posterior.

Manipulação de Conteúdo

o html( ) método obtém o conteúdo html (innerHTML) do primeiro elemento correspondente.

Aqui está a sintaxe do método -

selector.html( )

Exemplo

A seguir está um exemplo que usa os métodos .html () e .text (val). Aqui .html () recupera o conteúdo HTML do objeto e, em seguida, o método .text (val) define o valor do objeto usando o parâmetro passado -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Substituição de elemento DOM

Você pode substituir um elemento DOM completo pelos elementos HTML ou DOM especificados. oreplaceWith( content ) método serve muito bem a esse propósito.

Aqui está a sintaxe do método -

selector.replaceWith( content )

Aqui, o conteúdo é o que você deseja, em vez do elemento original. Pode ser HTML ou texto simples.

Exemplo

A seguir está um exemplo que substituiria o elemento de divisão por "<h1> JQuery is Great </h1>" -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Removendo Elementos DOM

Pode haver uma situação em que você gostaria de remover um ou mais elementos DOM do documento. JQuery fornece dois métodos para lidar com a situação.

o empty( ) método remove todos os nós filhos do conjunto de elementos correspondentes onde como o método remove( expr ) método remove todos os elementos correspondentes do DOM.

Aqui está a sintaxe do método -

selector.remove( [ expr ])

or 

selector.empty( )

Você pode passar o parâmetro opcional expr para filtrar o conjunto de elementos a serem removidos.

Exemplo

A seguir está um exemplo em que os elementos são removidos assim que são clicados -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Inserindo Elementos DOM

Pode haver uma situação em que você gostaria de inserir um ou mais elementos DOM em seu documento existente. JQuery fornece vários métodos para inserir elementos em vários locais.

o after( content ) método inserir conteúdo após cada um dos elementos correspondentes, onde como o método before( content ) método insere conteúdo antes de cada um dos elementos correspondentes.

Aqui está a sintaxe do método -

selector.after( content )

or

selector.before( content )

Aqui, o conteúdo é o que você deseja inserir. Pode ser HTML ou texto simples.

Exemplo

A seguir está um exemplo em que os elementos <div> estão sendo inseridos logo antes do elemento clicado -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Métodos de manipulação DOM

A tabela a seguir lista todos os métodos que você pode usar para manipular elementos DOM -

Sr. Não. Método e Descrição
1 depois (conteúdo)

Insira o conteúdo após cada um dos elementos correspondentes.
2 anexar (conteúdo)

Acrescente conteúdo ao interior de cada elemento correspondente.
3 appendTo (seletor)

Anexa todos os elementos correspondentes a outro conjunto de elementos especificado.
4 antes (conteúdo)

Insira o conteúdo antes de cada um dos elementos correspondentes.
5 clone (bool)

Clone os elementos DOM correspondentes e todos os seus manipuladores de eventos e selecione os clones.
6 clone ()

Clone os elementos DOM correspondentes e selecione os clones.
7 vazio ()

Remova todos os nós filhos do conjunto de elementos correspondentes.
8 html (val)

Defina o conteúdo html de cada elemento correspondente.
9 html ()

Obtenha o conteúdo html (innerHTML) do primeiro elemento correspondente.
10 insertAfter (seletor)

Insira todos os elementos correspondentes após outro conjunto de elementos especificado.
11 insertBefore (seletor)

Insira todos os elementos correspondentes antes de outro conjunto de elementos especificado.
12 prefixar (conteúdo)

Prefixe o conteúdo no interior de cada elemento correspondente.
13 prependTo (seletor)

Anexe todos os elementos correspondentes a outro conjunto de elementos especificado.
14 remover (expr)

Remove todos os elementos correspondentes do DOM.
15 substituirAll (seletor)

Substitui os elementos correspondidos pelo seletor especificado pelos elementos correspondidos.
16 substituirWith (conteúdo)

Substitui todos os elementos correspondentes pelos elementos HTML ou DOM especificados.
17 texto (val)

Defina o conteúdo do texto de todos os elementos correspondentes.
18 texto ()

Obtenha o conteúdo de texto combinado de todos os elementos correspondentes.
19 embrulhar (elem)

Envolva cada elemento correspondente com o elemento especificado.
20 wrap (html)

Envolva cada elemento correspondente com o conteúdo HTML especificado.
21 wrapAll (elem)

Envolva todos os elementos do conjunto correspondente em um único elemento de invólucro.
22 wrapAll (html)

Envolva todos os elementos do conjunto correspondente em um único elemento de invólucro.
23 wrapInner (elem)

Envolva o conteúdo filho interno de cada elemento correspondente (incluindo nós de texto) com um elemento DOM.
24 wrapInner (html)

Envolva o conteúdo filho interno de cada elemento correspondente (incluindo nós de texto) com uma estrutura HTML.