jQuery provides a powerful set of methods for manipulating the DOM. These methods allow you to add, remove, and modify elements and their content. This tutorial covers 20 different DOM manipulation techniques with detailed explanations and examples.
You can use jQuery methods to add new elements to the DOM. Common methods include .append(), .prepend(), .after(), and .before().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .append() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#appendButton").click(function(){
$("ul").append("<li>Appended Item</li>");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="appendButton">Append Item</button>
</body>
</html>
This example shows how to add a new element at the end of the selected elements using .append().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .prepend() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#prependButton").click(function(){
$("ul").prepend("<li>Prepended Item</li>");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="prependButton">Prepend Item</button>
</body>
</html>
This example demonstrates how to add a new element at the beginning of the selected elements using .prepend().
jQuery provides methods to remove elements from the DOM, such as .remove() and .empty().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .remove() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#removeButton").click(function(){
$("ul").remove();
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="removeButton">Remove List</button>
</body>
</html>
This example shows how to remove an element from the DOM using .remove().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .empty() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#emptyButton").click(function(){
$("ul").empty();
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="emptyButton">Empty List</button>
</body>
</html>
This example demonstrates how to remove all child elements from the selected elements using .empty().
You can modify existing elements using methods like .html(), .text(), .attr(), and .css().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .html() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#htmlButton").click(function(){
$("#content").html("<strong>New HTML Content</strong>");
});
});
</script>
</head>
<body>
<div id="content">Old Content</div>
<button id="htmlButton">Change HTML</button>
</body>
</html>
This example shows how to change the HTML content of an element using .html().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .text() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#textButton").click(function(){
$("#content").text("New Text Content");
});
});
</script>
</head>
<body>
<div id="content">Old Content</div>
<button id="textButton">Change Text</button>
</body>
</html>
This example demonstrates how to change the text content of an element using .text().
The .css() method allows you to change the CSS properties of selected elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Single Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#cssButton").click(function(){
$("p").css("color", "blue");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="cssButton">Change Color</button>
</body>
</html>
This example shows how to change the background color of an element using .css().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .css() Method - Multiple Properties</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#cssButton").click(function(){
$("p").css({
"color": "blue",
"font-size": "20px"
});
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="cssButton">Change Styles</button>
</body>
</html>
This example demonstrates how to set multiple CSS properties using .css().
jQuery provides methods to add and remove classes from elements, such as .addClass() and .removeClass().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .addClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#addClassButton").click(function(){
$("p").addClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<button id="addClassButton">Add Class</button>
</body>
</html>
This example shows how to add a class to an element using .addClass().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .removeClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#removeClassButton").click(function(){
$("p").removeClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This is a paragraph.</p>
<button id="removeClassButton">Remove Class</button>
</body>
</html>
This example demonstrates how to remove a class from an element using .removeClass().
The .toggleClass() method is used to add or remove a class based on its presence.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggleClass() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleClassButton").click(function(){
$("p").toggleClass("highlight");
});
});
</script>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<button id="toggleClassButton">Toggle Class</button>
</body>
</html>
This example shows how to toggle a class on an element using .toggleClass().
The .clone() method creates a copy of the selected elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .clone() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#cloneButton").click(function(){
$("p").clone().appendTo("body");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="cloneButton">Clone Paragraph</button>
</body>
</html>
This example demonstrates how to clone an element using .clone().
The .replaceWith() method replaces the selected elements with new content.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .replaceWith() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#replaceButton").click(function(){
$("p").replaceWith("<h2>Replaced with H2</h2>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="replaceButton">Replace Paragraph</button>
</body>
</html>
This example shows how to replace an element using .replaceWith().
jQuery provides methods to wrap elements with other elements, such as .wrap(), .wrapAll(), and .wrapInner().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .wrap() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#wrapButton").click(function(){
$("p").wrap("<div class='wrapper'></div>");
});
});
</script>
<style>
.wrapper {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<button id="wrapButton">Wrap Paragraph</button>
</body>
</html>
This example shows how to wrap an element using .wrap().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .wrapAll() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#wrapAllButton").click(function(){
$("p").wrapAll("<div class='wrapper'></div>");
});
});
</script>
<style>
.wrapper {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="wrapAllButton">Wrap All Paragraphs</button>
</body>
</html>
This example demonstrates how to wrap all selected elements using .wrapAll().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .wrapInner() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#wrapInnerButton").click(function(){
$("div").wrapInner("<div class='innerWrapper'></div>");
});
});
</script>
<style>
.innerWrapper {
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<div>This is some content.</div>
<button id="wrapInnerButton">Wrap Inner Content</button>
</body>
</html>
This example illustrates how to wrap the inner content of an element using .wrapInner().
You can insert new content inside existing elements using methods like .html(), .text(), .before(), and .after().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .html() Method - Insert HTML</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#htmlInsertButton").click(function(){
$("#content").html("<strong>Inserted HTML Content</strong>");
});
});
</script>
</head>
<body>
<div id="content">Old Content</div>
<button id="htmlInsertButton">Insert HTML</button>
</body>
</html>
This example shows how to insert HTML content inside an element using .html().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .text() Method - Insert Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#textInsertButton").click(function(){
$("#content").text("Inserted Text Content");
});
});
</script>
</head>
<body>
<div id="content">Old Content</div>
<button id="textInsertButton">Insert Text</button>
</body>
</html>
This example demonstrates how to insert text content inside an element using .text().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .before() Method - Insert Before</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#beforeInsertButton").click(function(){
$("p").before("<h2>Inserted Before Paragraph</h2>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="beforeInsertButton">Insert Before Paragraph</button>
</body>
</html>
This example illustrates how to insert content before an element using .before().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .after() Method - Insert After</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#afterInsertButton").click(function(){
$("p").after("<h2>Inserted After Paragraph</h2>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button id="afterInsertButton">Insert After Paragraph</button>
</body>
</html>
This example shows how to insert content after an element using .after().
jQuery methods such as .attr() and .prop() are used to get and set element attributes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .attr() Method - Get Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#attrGetButton").click(function(){
var src = $("img").attr("src");
alert("Image src: " + src);
});
});
</script>
</head>
<body>
<img src="/images/common/cutecat.png" alt="Example Image">
<button id="attrGetButton">Get Attribute</button>
</body>
</html>
This example shows how to get an attribute value using .attr().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .attr() Method - Set Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#attrSetButton").click(function(){
$("img").attr("src", "/images/common/cutecat.png");
});
});
</script>
</head>
<body>
<img src="/images/common/cutecat.png" alt="Example Image">
<button id="attrSetButton">Set Attribute</button>
</body>
</html>
This example demonstrates how to set an attribute value using .attr().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .prop() Method - Get Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#propGetButton").click(function(){
var checked = $("#checkbox").prop("checked");
alert("Checkbox checked: " + checked);
});
});
</script>
</head>
<body>
<input type="checkbox" id="checkbox" checked>
<button id="propGetButton">Get Property</button>
</body>
</html>
This example illustrates how to get a property value using .prop().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .prop() Method - Set Property</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#propSetButton").click(function(){
$("#checkbox").prop("checked", true);
});
});
</script>
</head>
<body>
<input type="checkbox" id="checkbox">
<button id="propSetButton">Set Property</button>
</body>
</html>
This example shows how to set a property value using .prop().
jQuery provides methods to traverse the DOM, such as .parent(), .children(), .siblings(), and .closest().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .parent() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#parentButton").click(function(){
$("span").parent().css("border", "2px solid red");
});
});
</script>
</head>
<body>
<div>
<span>This is a span inside a div.</span>
</div>
<button id="parentButton">Highlight Parent</button>
</body>
</html>
This example shows how to traverse up the DOM tree using .parent().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .children() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#childrenButton").click(function(){
$("div").children().css("border", "2px solid blue");
});
});
</script>
</head>
<body>
<div>
<span>This is a span inside a div.</span>
<p>This is a paragraph inside a div.</p>
</div>
<button id="childrenButton">Highlight Children</button>
</body>
</html>
This example demonstrates how to traverse down the DOM tree using .children().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .siblings() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#siblingsButton").click(function(){
$("p").siblings().css("border", "2px solid green");
});
});
</script>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<span>This is a span.</span>
<h2>This is a heading.</h2>
</div>
<button id="siblingsButton">Highlight Siblings</button>
</body>
</html>
This example illustrates how to traverse to sibling elements using .siblings().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .closest() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#closestButton").click(function(){
$("span").closest("div").css("border", "2px solid purple");
});
});
</script>
</head>
<body>
<div>
<span>This is a span inside a div.</span>
</div>
<button id="closestButton">Highlight Closest Div</button>
</body>
</html>
This example shows how to find the closest ancestor that matches the selector using .closest().
jQuery provides methods to filter elements, such as .filter(), .not(), and .is().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .filter() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").filter(".filtered").css("color", "red");
});
});
</script>
</head>
<body>
<p class="filtered">This paragraph will be filtered.</p>
<p>This paragraph will not be filtered.</p>
<button>Filter Paragraphs</button>
</body>
</html>
This example shows how to filter elements that match a certain criteria using .filter().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .not() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").not(".excluded").css("color", "blue");
});
});
</script>
</head>
<body>
<p class="excluded">This paragraph will be excluded.</p>
<p>This paragraph will not be excluded.</p>
<button>Exclude Paragraphs</button>
</body>
</html>
This example demonstrates how to exclude elements that match a certain criteria using .not().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .is() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
if($("p").is(".checked")){
alert("The paragraph has the 'checked' class.");
} else {
alert("The paragraph does not have the 'checked' class.");
}
});
});
</script>
</head>
<body>
<p class="checked">This paragraph has the 'checked' class.</p>
<button>Check Class</button>
</body>
</html>
This example illustrates how to check if any of the selected elements match a certain criteria using .is().
jQuery provides several methods to create animations, such as .animate(), .fadeIn(), .fadeOut(), .slideDown(), and .slideUp().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .animate() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
<style>
div {
position: relative;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="animateButton">Animate</button>
</body>
</html>
This example shows how to animate the properties of an element using .animate().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeIn() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("div").fadeIn();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="fadeInButton">Fade In</button>
</body>
</html>
This example demonstrates how to fade in an element using .fadeIn().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .fadeOut() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("div").fadeOut();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="fadeOutButton">Fade Out</button>
</body>
</html>
This example illustrates how to fade out an element using .fadeOut().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideDown() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDownButton").click(function(){
$("div").slideDown();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="slideDownButton">Slide Down</button>
</body>
</html>
This example shows how to slide down an element using .slideDown().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .slideUp() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("div").slideUp();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="slideUpButton">Slide Up</button>
</body>
</html>
This example demonstrates how to slide up an element using .slideUp().
The .show() and .hide() methods are used to display and hide elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .show() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("div").show();
});
});
</script>
<style>
div {
display: none;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="showButton">Show</button>
</body>
</html>
This example shows how to display a hidden element using .show().
<!DOCTYPE html>
<html>
<head>
<title>jQuery .hide() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("div").hide();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="hideButton">Hide</button>
</body>
</html>
This example demonstrates how to hide an element using .hide().
The .toggle() method toggles the visibility of elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .toggle() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("div").toggle();
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="toggleButton">Toggle</button>
</body>
</html>
This example shows how to toggle the visibility of an element using .toggle().
The .delay() method is used to delay the execution of subsequent items in the queue.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .delay() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#delayButton").click(function(){
$("div").fadeOut(1000).delay(2000).fadeIn(1000);
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="delayButton">Delay Animation</button>
</body>
</html>
This example demonstrates how to delay an animation using .delay().
The .queue() method allows you to set up a queue of functions to be executed on an element.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .queue() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#queueButton").click(function(){
$("div").animate({height: '300px'}, "slow")
.animate({width: '300px'}, "slow")
.animate({opacity: '0.5'}, "slow");
});
});
</script>
<style>
div {
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="queueButton">Queue Animations</button>
</body>
</html>
This example shows how to use the .queue() method to chain multiple animations.
The .stop() method is used to stop animations that are currently running.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .stop() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#startButton").click(function(){
$("div").animate({left: '250px'}, 5000);
});
$("#stopButton").click(function(){
$("div").stop();
});
});
</script>
<style>
div {
position: relative;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="startButton">Start Animation</button>
<button id="stopButton">Stop Animation</button>
</body>
</html>
This example demonstrates how to stop an animation using the .stop() method.
The .clearQueue() method removes all items from the queue.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .clearQueue() Method</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#queueButton").click(function(){
$("div").animate({left: '250px'}, 5000)
.queue(function(){
$(this).css("background-color", "red").dequeue();
});
});
$("#clearQueueButton").click(function(){
$("div").clearQueue();
});
});
</script>
<style>
div {
position: relative;
background-color: yellow;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
<button id="queueButton">Start Queue</button>
<button id="clearQueueButton">Clear Queue</button>
</body>
</html>
This example shows how to clear the animation queue using the .clearQueue() method.