### jQuery - DOM Manipulation

In the previous lesson we learned how to select HTML elements using jQuery. Now let's see how we can change their content.

#### .html()

The html method is equivalent to the innerHTML property from Javascript. We can use it to get the content of an element and also to change it.

        var content = $("#sample_text").html();
        console.log(content);

        $("#sample_text").html("New content");
        content = $("#sample_text").html();
        console.log(content);

Use this paragraph to test the html method.

#### .text()

The text method is similar to the html method but the difference is that it ignores html tags and returns text only.

        var text_content = $("#sample-text-only").text();
        console.log(text_content);

Use this paragraph to test the text method.

#### .attr()

The attr method is used to manipulate html attributes, such as "src", "href", "target", etc.

Let's work with this URL.

        // Get the href:

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

        // Change the href:

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

Now let's change the src attribute of an image when clicking a button:

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

#### .empty() and .remove()

To erase all the content of an element we could set its HTML to an empty string:

        $("#empty_paragraph").html("");

However, jQuery has specific methods for that task.

Use this element to test the empty and remove methods.

        // Remove the content but keep the element:
        $("#empty_paragraph").empty();

        // Erase the element:
        $("#empty_paragraph").remove();

        // Keep content but hide the element:
        $("#empty_paragraph").hide();

### Contents