HTML Manipulation and Traversing
jQuery .append() Method:
Appends content at the end of selected elements.
Example:
$(document).ready(function () {
$("#myDiv").append("<p>This is some appended content.</p>");
});.appendTo() Method:
Appends an HTML element at the end of selected element.
Example:
$(document).ready(function () {
$("<span>This is appended.</span>").appendTo("p");
});.html() Method:
Sets or returns the innerHTML content of selected element.
Example:
$(document).ready(function () {
$("#myDiv").html("<p>New content set with .html() method.</p>");
});.prependTo() Method:
Inserts HTML elements or content at the beginning of selected element.
Example:
$(document).ready(function () {
$("<h2>This is prepended.</h2>").prependTo("#myDiv");
});.text() Method:
Sets or returns the text content of the element.
Example:
$(document).ready(function () {
$("p").text("New text content set with .text() method.");
});.clone() Method:
Creates a copy of selected elements including its children.
Example:
$(document).ready(function () {
var $clonedList = $("#myList").clone();
$clonedList.appendTo("#newDiv");
});.insertBefore() Method:
Inserts HTML content before a specified element.
Example:
$(document).ready(function () {
$("<p>This is inserted before the heading.</p>").insertBefore("h2");
});.insertAfter() Method:
Inserts HTML content after a specified element.
Example:
$(document).ready(function () {
$("<p>This is inserted after the heading.</p>").insertAfter("h2");
});.detach() Method:
Removes the selected elements from the DOM tree.
Example:
$(document).ready(function () {
var $myDiv = $("#myDiv");
$("#detachButton").click(function () {
$myDiv.detach();
});
$("#reattachButton").click(function () {
$myDiv.appendTo("body");
});
});.empty() Method:
Removes all child nodes and their content for selected elements.
Example:
$(document).ready(function () {
$("#emptyButton").click(function () {
$("#myDiv").empty();
});
});.remove() Method:
Removes all the selected elements including the text.
Example:
$(document).ready(function () {
$("#removeButton").click(function () {
$("p").remove();
});
});.replaceWith() Method:
Replaces the selected element with new content.
Example:
$(document).ready(function () {
$("#replaceButton").click(function () {
$("p").replaceWith("<h2>New heading replacing the paragraph.</h2>");
});
});.wrapAll() Method:
Wraps a specified element around all selected elements.
Example:
$(document).ready(function () {
$("p").wrapAll("<div class='wrapper'></div>");
});.attr() Method:
Gets the value of an attribute for the first element in the set of matched elements.
Example:
$(document).ready(function () {
var srcValue = $("img").attr("src");
console.log("Image source:", srcValue);
});.html() Method:
Gets the innerHTML content of the first matched element.
Example:
$(document).ready(function () {
var htmlContent = $("#myDiv").html();
console.log("HTML content:", htmlContent);
});.val() Method:
Gets the current value of the first element in the set of matched elements.
Example:
$(document).ready(function () {
var inputValue = $("input").val();
console.log("Input value:", inputValue);
});.children():
This method retrieves all the direct child elements of a selected element.
Example:
$("ul").children("li").css("color", "blue");.next():
The .next() method gets the next sibling element of the selected element.
Example:
$("h2").next("p").addClass("highlight");.closest():
This method fetches the closest ancestor of the selected element that matches the provided selector.
Example:
$("a").closest("div").addClass("active");.parent():
The .parent() method selects the direct parent element of the chosen element.
Example:
$("span").parent().addClass("highlight");
.prevUntil():
.prevUntil() selects all sibling elements that come before the selected element up to a specified element.Example:
$("h3").prevUntil("h1").addClass("background");.siblings():
The .siblings() method retrieves all sibling elements of the chosen element.
Example:
$("li.selected").siblings().removeClass("selected");.first():
This method selects the first element from a set of elements.
Example
$("p").first().addClass("first-paragraph");.last():
The .last() method selects the last element from a set of elements.
Example:
$("div.item").last().addClass("last-item");
.is():
.is() checks if the selected element matches a given selector.Example:
if ($("input").is(":checked")) {
console.log("Checkbox is checked.");
}.map():
The .map() method transforms each element in an array and returns a new array.
Example:
const lengths = $("p").map(function() {
return $(this).text().length;
}).get();.filter():
This method narrows down elements based on certain criteria and returns the matching elements.
Example:
$("li").filter(".important").addClass("highlight");.not():
The .not() method selects all elements except those that match the specified selector.
Example:
$("div").not(".special").addClass("regular");.andSelf():
This method adds the previously selected elements to the current set.
Example:
$("li").next().andSelf().addClass("highlight");.each():
The .each() method applies a function to each element in the selection.
Example:
$("ul li").each(function(index) {
$(this).text("Item " + (index + 1));
});.find():
This method retrieves all descendant elements of the selected element.
Example:
$("div.container").find("p").addClass("inside-container");