jQuery DOM Manipulation Methods

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.

Inserts HTML content inside, before existing content.

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

Example: DOM Manipulation in Action

<!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>

Summary Table

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

jQuery DOM Manipulation Methods

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.

Inserts HTML content inside, before existing content.

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

Example: DOM Manipulation in Action

<!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>

Summary Table

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

jQuery DOM Manipulation Methods in JavaScript

jQuery DOM Manipulation Methods

Example: DOM Manipulation in Action

Summary Table

Keep Reading

jQuery DOM Manipulation Methods in JavaScript

jQuery DOM Manipulation Methods

Example: DOM Manipulation in Action

Summary Table

Keep Reading