logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

jQuery - Manipulação do conteúdo HTML

Vamos agora nos aprofundar um pouco mais nos métodos jQuery para manipular o conteúdo HTML.

.html()

O método html é equivalente à propriedade innerHTML que usamos nas seções anteriores do curso. Ele serve tanto para pegar o conteúdo html de um elemento, quanto para defini-lo.

                    

    var conteudo_html = $("#paragrafo-html").html();
    console.log(conteudo_html);
    
    $("#paragrafo-html").html("Mudar conteúdo do parágrafo");
    conteudo_html = $("#paragrafo-html").html();
    console.log(conteudo_html);

                        
                    
                

Use este parágrafo para testar o método html.

.text()

O método text é semelhante ao método html, mas ele pega apenas o conteúdo em texto do elemento, ignorando as tags html.

                    

    var conteudo_texto = $("#paragrafo-text").text();
    console.log(conteudo_texto);
                        
                    
                

Use este parágrafo para testar o método text.

.attr()

O método attr é usado para manipular os atributos html, como "src", "href", "target", etc.

Trabalhe com a url deste link.

                    
    
    // Pegar o valor atual do href:

    var url_link = $("#paragrafo-link").attr("href");
    console.log(url_link);

                    
                
                    
    
    // Trocar o valor do href:

    $("#paragrafo-link").attr("href", "http://www.udemy.com");
    url_link = $("#paragrafo-link").attr("href");
    console.log(url_link);

                    
                

Vamos agora trocar o src de uma imagem ao clicar em um botão:

js
                    

    $("#mudar_imagem").click(function(){
        $("#imagem_js").attr("src", "https://cdn.tutsplus.com/net/uploads/2013/12/managing-async-nodejs-retina-preview.png");
        $("#mudar_imagem").hide();
    });

                    
                

.empty() e .remove()

Para apagar todo o conteúdo de um elemento, poderíamos definir um string vazio com o método html:

                    

    $("#paragrafo-empty").html("");

                    
                

Use este parágrafo para testar os métodos empty e remove.

Porém, existem outras maneiras de fazer, com os métodos empty e remove. O primeiro apaga apenas o conteúdo do elemento enquanto o segundo remove o elemento.

                    
    // Remover o conteúdo, mantendo o elemento:
    $("#paragrafo-empty").empty();

    // Remover o elemento:
    $("#paragrafo-empty").remove();

                    
                    

Índice de Aulas