Lessons 187 & 188 – Complete 2020 Web Development Bootcamp

Lesson 187 – Adding & Removing Elements with JQuery

To add a new html element before an existing element, you can use the JQuery .before() method. So the code to add a button before an h1 element is –

$("h1").before("<button>New</button>");

To add a new html element after an existing html element, you can use the .after() method. So the code to add a button before an h1 element is –

$("h1").after("<button>New</button>");

The .prepend() method is similar to the .before() method except that it adds the new element just before the content of the existing element whereas the .before() method adds the new element just before the existing element.

The .append() method is similar to the .after() method except that it adds the new element just after the content of the existing element whereas the .after() method adds the new element just after the existing element.

To remove an existing html element, you can use the .remove() property. So if you want to remove all of the buttons, you can use –

$("button").remove();

Lesson 188 – Website Animations with JQuery

You can use JQuery to implement website animations.

For example, if you want to hide an h1 element on a button being clicked, you can use the .hide() method as in the following code.

$("button").on("click", function() {

	$("h1").hide();

});

You can use the .toggle() method to toggle between an h1 element being hidden and being shown on a button being clicked as in the following code.

$("button").on("click", function() {

	$("h1").toggle();

});

You can use the .fadeOut() method to gradually reduce the opacity of an element until it fades out completely. For example –

$("button").on("click", function() {

	$("h1").fadeOut();

});

To have an element fade in to view, you can use the .fadeIn() method. The following code will fade in the h1 element on a button click.

$("button").on("click", function() {

	$("h1").fadeIn();

});

The .fadeIn() and .fadeOut() methods both have a toggle option so you can use .fadeToggle() to fade an image in and out.

Another animation is .slideUp() and .slideDown(). the .slideUp() method collapses the element that it is run on. So the following code will collapse the h1 element on a button click.

$("button").on("click", function() {

	$("h1").slideUp();

});

The .slideUp() and .slideDown() methods both have the toggle option. If you use .slideToggle() as in the code below, you can toggle the h1 element between sliding up and down by clicking on a button.

$("button").on("click", function() {

	$("h1").slideToggle();

});

To get more precise control over the animation you are trying to achieve, you can use the .animate() method. The following code uses the .animate() method to reduce the opacity of the h1 element by 50% when a button is clicked.

$("button").on("click", function() {

	$("h1").animate({opacity: 0.5});

});

It is important to remember that you can only use the .animate() method to control CSS rules which have a numeric value.

You can also chain these methods together like this –

$("button").on("click", function() {

	$("h1").slideUp().slideDown().animate({opacity: 0.5});

});