jQuery Move Content Methods

1. jQuery Move Elements – DOM Manipulation

jQuery makes it simple to move existing elements around the DOM without reloading the page. Whether you need to reposition text, HTML elements, or entire sections, these DOM modification methods provide flexible ways to relocate content before, after, or inside other elements. In this tutorial, you will learn how to use the following methods to move elements with jQuery in a clear, easy-to-understand way:

1.1. Key Methods for Moving Elements

• .append(): Move selected elements to the end of target containers.
• .appendTo(): Same as .append(), but with reversed syntax.
• .prepend(): Move selected elements to the beginning of target containers.
• .prependTo(): Same as .prepend(), but reversed syntax.
• .after(): Move selected elements to immediately follow target elements.
• .insertAfter(): Same as .after(), but reversed syntax.
• .before(): Move selected elements to immediately precede target elements.
• .insertBefore(): Same as .before(), but reversed syntax.

2. Move Elements with append() Method

The append() method in jQuery can be used to relocate existing elements within the DOM. When you append an existing element to another container, it is moved from its original location to the end of the new container. This technique is useful for reordering or reorganizing content dynamically, such as moving list items, divs, or other elements to a different part of the page.

$(function(){
	$("#moveItem").on("click", function(){
		var $item = $("#sourceList li:first");
		if ($item.length) {
			$("#targetList").append($item);
		} else {
			alert("No more items to move.");
		}
	});
});

2.1. jQuery append() Method With Callback

Use a callback with append() to dynamically determine content based on index or custom logic.

$("#moveItem").on("click", function(){
	$("#targetList").append(function(){
		var $item = $("#sourceList li:first");
		if (!$item.length) {
			$("#moveItem").prop("disabled", true);
			$("#message").text("All items moved!");
			return "";
		}
		var count = $("#targetList li").length + 1;
		$item.text(count + ". " + $item.text());
		return $item;
	});
});

3. Move Elements with appendTo() Method

The appendTo() method in jQuery moves existing elements to the end of a specified target container. This technique is useful for dynamically reordering or reorganizing content, such as relocating list items, divs, or other elements to a different part of the page. With appendTo(), the element itself is the subject of the action, and the target container is specified as an argument, reversing the syntax of append().

$(document).ready(function(){
  $("#reorderBoxes").click(function(){
    $(".box").appendTo("#container");
  });
});

4. Move Elements with prepend() Method

The prepend() method in jQuery moves existing elements to the beginning of a specified container. This technique is useful for dynamically reordering or reorganizing content, such as relocating list items, divs, or other elements to the start of a different part of the page. By prepending an element, it is removed from its original location and inserted at the beginning of the new container.

$(document).ready(function(){
	$("#moveLastToStart").click(function(){
		$("#container").prepend($(".box:last"));
	});
});

4.1. jQuery prepend() Method With Callback

Use a callback with prepend() to dynamically determine content based on index or custom logic.

$(document).ready(function(){
	$("#moveLastToStart").click(function(){
		const lastBox = $(".box:last");
		$("#container").prepend(function() {
			lastBox.css("background", "#4CAF50").text("Moved");
			return lastBox;
		});
	});
});

5. Move Elements with prependTo() Method

The prependTo() method in jQuery moves existing elements to the beginning of a target container. Similar to prepend(), but with reversed syntax, where the element is the subject and the target container is specified as an argument. Useful for dynamically reordering content.

$(document).ready(function(){
	$("#reorderBoxes").click(function(){
		$(".box:last").prependTo("#container");
	});
});

6. Move Elements with after() Method

The after() method in jQuery moves existing elements to a new location in the DOM, placing them immediately after a specified element. This technique is useful for dynamically reordering or reorganizing content.

$(document).ready(function(){
	$("#showTooltip").click(function(){
		$(".note").after($("#myID"));
	});
});

6.1. jQuery after() Method With Callback

Use a callback with after() to dynamically determine content based on index or custom logic.

$(document).ready(function(){
	$("#showTooltip").click(function(){
		$(".note").after(function(){
			$("#myID").css({
				"background": "#4CAF50",
				"color": "#fff",
				"padding": "12px",
				"font-style": "italic"
			});
			return $("#myID");
		});
	});
});

7. Move Elements with insertAfter() Method

The insertAfter() method in jQuery moves existing elements to a new location in the DOM, placing them immediately after a specified target element. Similar to after(), but with reversed syntax.

$(document).ready(function(){
  $("#moveLastBox").click(function(){
    $(".box:last").insertAfter(".box:first");
  });
});

8. Move Elements with before() Method

The before() method in jQuery moves existing elements to a new location in the DOM, placing them immediately before a specified element. This technique is useful for dynamically reordering or reorganizing content.

$(document).ready(function(){
  $("#movePromo").click(function(){
    $("#promo").before($(".sidebar"));
  });
});

8.1. jQuery before() Method With Callback

Use a callback with before() to dynamically determine content based on index or custom logic.

$(document).ready(function(){
	$("#movePromo").click(function(){
		var $sidebar = $(".sidebar");
		$("#promo").before($sidebar);
		// Simulate callback action
		$sidebar.css("background", "#333333");
	});
});

9. Move Elements with insertBefore() Method

The insertBefore() method in jQuery moves existing elements to a new location in the DOM, placing them immediately before a specified target element. Similar to before(), but with reversed syntax.

$(document).ready(function(){
  $("#addPromo").click(function(){
    $("#dealBanner").insertBefore(".header");
  });
});