HTML Manipulation and Traversing

Level : Beginner
Mentor: Shailendra Chauhan
Duration : 00:00:45

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");

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this