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:

$("#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();