Manipulating the DOM with jQuery

We’ve already seen some basic DOM manipulation with previous examples. Things like adding a class when the DOM is ready, or updating the text of a button based upon events that the user creates as they use the page.

However, these are simple, and we can do so much more.

First however, let’s talk about what the DOM, or Document Object Model is. The DOM a programming interface that represents a web page as a tree structure of nodes and objects. The DOM allows JavaScript to change the content, style, and structure of a web page.

To do this, it can:

• add and remove classes and attributes to existing HTML tags i.e. nodes,
• add new child nodes and remove nodes to an existing node, and
• change the content within a node.

Replacing Content on Your Webpage

We’ve already seen how to manipulate the DOM with the most basic of methods, html() and text(). These methods allow you to change the inner content of an element. However, this is very limiting, especially if you want to add new content to a page, or wrap content around existing content.

There is another method, replaceWith(), which will replace your selected item with what you pass to it.

$("p").replaceWith("<h2>Replaced paragraph with heading.</h2>");

This, of course, will replace every paragraph with the heading. That might be a problem. So you might need to either limit your selector, or use the $(this) to specify a specific element.

Adding Content

There are a couple of different methods that will allow you to add content. Such as using append(), prepend(), after(), or before() based on where you want to insert the content (inside or outside, before or after).

append() Inserts content to the end of the selected element(s).

prepend() – Inserts content to the beginning of the selected element(s).

after() – Inserts content after the selected element(s) in the DOM (outside of it, not within).

before() – Inserts content before the selected element(s) in the DOM (outside of it, not within).

For example, assume you have some HTML like so:

<div id="data"><p>I was here first.</p></div>

Then you could have some JavaScript code to modify it.

        $(document).ready(function () {
            $('#data').append("<p>This was appended to #data.</p>");
            $('#data').prepend("<p>This was prepended to #data.</p>");
            $('#data').after("<p>This was added after #data.</p>");
            $('#data').before("<p>This was added before #data.</p>");
        });

What it yields is:

    <p>This was added before #data.</p>
    <div id="data">
        <p>This was prepended to #data.</p>
        <p>I was here first.</p>
        <p>This was appended to #data.</p>
    </div>
    <p>This was added after #data.</p>

Notice that it puts it in our div with an id of data with the appropriate tags necessary to make it work.

Removing Content

You can also remove content with the remove() for deleting elements entirely, or empty() for clearing inner content.

Conclusion

There are, of course, other methods for adding, cloning, and modifying the DOM, but this is a good start and an overview of the methods you will typically use in manipulating the DOM with jQuery.

I’ll have another example which will show you some examples of working with the DOM in more detailed example.

Manipulating the DOM with jQuery was originally found on Access 2 Learn