• Choose a category
• All
• Classic-Fiction

An example is the easiest way to show how this works. This is how we’d create the toggle button using jQuery:

chapter_02/17_insert_after/script.js (excerpt)

$('')

.insertAfter('#disclaimer');

$('#toggleButton').click(function() {

$('#disclaimer').toggle();

});

As shown in Figure 2.5, the button is inserted into our page after the disclaimer, just as if we’d put it there in our HTML file.

Figure 2.5. A button created and inserted with jQuery

The insertAfter function adds the new element as a sibling directly after the disclaimer element. If you want the button to appear before the disclaimer element, you could either target the element before the disclaimer and use insertAfter, or, more logically, use the insertBefore method. insertBefore will also place the new element as a sibling to the existing element, but it will appear immediately before it:

chapter_02/18_insert_before/script.js (excerpt)

$('')

.insertBefore('#disclaimer');

A quick refresher: when we talk about the DOM, siblings refer to elements on the same level in the DOM hierarchy. If you have a div that contains two span elements, the span elements are siblings.

If you want to add your new element as a child of an existing element (that is, if you want the new element to appear inside the existing element) then you can use the prependTo or appendTo functions:

chapter_02/19_prepend_append/script.js (excerpt)

$('START!').prependTo('#disclaimer');

$('END!').appendTo('#disclaimer');

As you can see in Figure 2.6, our new elements have been added to the start and the end of the actual disclaimer div, rather than before or after it. There are more actions for inserting and removing elements, but as they’re unneeded in this round of changes, we’ll address them later on.

Figure 2.6. prependTo and appendTo in action

Important: Inserting Multiple Elements

A new item is inserted once for each element that’s matched with the selector. If your selector matches every paragraph tag, for example, the insertAfter action will add a new element after every paragraph tag. Which makes it a fairly powerful function!

Removing Existing Elements

We informed the client that up to 10% of his users might lack JavaScript capabilities and would therefore miss out on some of the advanced features we’re building. He asked if we could add a message explaining that JavaScript was recommended for those people. Obviously the message should be hidden from those who do have JavaScript.

This seems like a perfect opportunity to learn how to remove HTML elements from a page using jQuery. We’ll put the message in our HTML and remove it with jQuery; that way, only those visitors without JavaScript will see it.

Let’s go ahead and add the new warning to our HTML page:

chapter_02/20_removing_elements/index.html (excerpt)

We recommend that you have JavaScript enabled!

Now we need to run our code to remove the element from the page. If a user has JavaScript disabled, our jQuery statements will fail to run and the message will remain on the screen. To remove elements in jQuery, you first select them (as usual) with a selector, and then call the remove method:

chapter_02/20_removing_elements/script.js (excerpt)

$('#no-script').remove();

The remove action will remove all of the selected elements from the DOM, and will also remove any event handlers or data attached to those elements. The remove action does not require any parameters, though you can also specify an expression to refine the selection further. Try this example:

chapter_02/21_removing_with_selector/script.js (excerpt)

$('#celebs tr').remove(':contains("Singer")');

Rather than removing every tr in the #celebs div, this code will remove only those rows which contain the text “Singer.” This will come in handy when we look at some advanced