Clean • Professional
jQuery DOM manipulation methods allow you to create, move, clone, or remove elements dynamically in the HTML document.
These methods are essential for building interactive web pages without directly touching the raw DOM API.
append() – Add Content Inside an Element (End)
Adds content at the end of selected elements.
• Inserts HTML content inside the element, after any existing content.
$("div").append("<p>Appended paragraph</p>");
prepend() – Add Content Inside an Element (Start)
Adds content at the beginning of selected elements.
$("div").prepend("<p>Prepended paragraph</p>");
after() – Add Content After an Element
Inserts content outside and after the selected element.
$("p").after("<hr>");
before() – Add Content Before an Element
Inserts content outside and before the selected element.
$("p").before("<h4>Title:</h4>");
remove() – Remove Elements
Deletes selected elements from the DOM completely.
$("#demo").remove();
empty() – Clear Inner Content
Removes only the inner HTML of selected elements but keeps the element itself.
$("#container").empty();
clone() – Duplicate Elements
Creates a copy of selected elements, including child elements.
Can also clone event handlers if true is passed.
let clone = $("#demo").clone();
$("#container").append(clone);
wrap() – Wrap an HTML Structure Around an Element
Wraps the selected element(s) inside a new HTML structure.
$("p").wrap("<div class='wrapper'></div>");
unwrap() – Remove Parent Element
Removes the parent of the selected element, keeping the element itself.
$(".inner").unwrap();
replaceWith() – Replace an Element
Replaces selected elements with new content.
$("#demo").replaceWith("<p>New content!</p>");
appendTo() – Append Element to Target
Adds the selected element to another element in the DOM.
$("<p>Appended via appendTo</p>").appendTo("#container");
insertBefore() / insertAfter() – Move Element
Moves an element before or after another element in the DOM.
$("<hr>").insertBefore("#demo");
$("<hr>").insertAfter("#demo");
wrapAll() – Wrap All Selected Elements Together
Wraps all selected elements in a single wrapper element.
$("p").wrapAll("<div class='wrapper'></div>");
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM Manipulation Example</title>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
<style>
.wrapper { border: 2px dashed #333; padding: 10px; margin: 5px; }
</style>
</head>
<body>
<div id="container">
<p id="para1">Paragraph 1</p>
<p id="para2">Paragraph 2</p>
</div>
<button id="btn">Manipulate DOM</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
// Append and prepend content
$("#container").append("<p>Appended paragraph</p>");
$("#container").prepend("<p>Prepended paragraph</p>");
// Wrap all paragraphs in a div
$("p").wrapAll("<div class='wrapper'></div>");
// Clone a paragraph and append it
let clone = $("#para1").clone();
$("#container").append(clone);
// Replace second paragraph
$("#para2").replaceWith("<p>Replaced Paragraph 2</p>");
});
});
</script>
</body>
</html>
| Method | Description | Example |
|---|---|---|
append() | Add content inside, at end | $("div").append("<p>Hi</p>") |
prepend() | Add content inside, at start | $("div").prepend("<p>Hi</p>") |
after() | Add content after element | $("p").after("<hr>") |
before() | Add content before element | $("p").before("<h4>Title</h4>") |
remove() | Remove element entirely | $("#demo").remove() |
empty() | Remove inner content | $("#container").empty() |
clone() | Duplicate element | $("#demo").clone() |
wrap() | Wrap element | $("p").wrap("<div></div>") |
unwrap() | Remove parent wrapper | $(".inner").unwrap() |
replaceWith() | Replace element | $("#demo").replaceWith("<p>New</p>") |
appendTo() | Append element to target | $("<p>Hi</p>").appendTo("#container") |
insertBefore() | Insert element before target | $("<hr>").insertBefore("#demo") |
insertAfter() | Insert element after target | $("<hr>").insertAfter("#demo") |
wrapAll() | Wrap all selected elements together | $("p").wrapAll("<div></div>") |