Move Child Element Up One Level with jQuery

Maybe some of you had problem with some elements (divs, buttons, list items, links, images) to move them up one level, each one inside their parent element. This is very useful when you really don't have access or you can't edit the html source at all.

As here we will move element in another element, I recommend you first to read an older tutorial of mine about how to move div in another div. It will give you a little boost of knowledge to see how the things below will be handled.

Let me give you a fast example. Supposing that you have a div which gets few posts from a blog, together with post title, date and author. What about if you want to move each container with the author above their respective date container. Here is a plain html structure of what I am trying to explain:

<div class="blog-listing">

	<div class="post-item">
		<h4><a href="#">Lorem ipsum dolor sit amet consectetur</a></h4>
		<div class="post-details">
			<div class="post-date">March 2, 2015</div>
			<div class="post-author">by Some Author</div>
		</div>
	</div>

	<div class="post-item">
		<h4><a href="#">Lorem ipsum dolor sit amet consectetur</a></h4>
		<div class="post-details">
			<div class="post-date">February 25, 2015</div>
			<div class="post-author">by Another Author</div>
		</div>
	</div>

</div>

The technique is very simple. We will need to target the element you want to move using his class name (or id) and use the each function from jQuery. What each does is to look through all containers with the class "post-item" and see if "post-author" container exists and to move each author above the date container.

Full HD Video Tutorial

Move Child Element Up One Level

Supposing that you want to move the author div above the post title. To do that, you need to go up one level using the parent() function from jQuery and move the element above the post title.

Instead of moving the element using prependTo or insertBefore, which will create duplicates, we will remove the element and create it again using prepend or before functions.

Case 1 - Exact Target

Exact target means that will place the element exactly before the <h4> tag as in the script below:

$('.blog-listing .post-item .post-author').each(function() {
	$(this).parent().parent().find('h4').before($(this));
});

Case 2 - Relative Target

Relative target means that you will place the element by a relative location using parent() and moving the element right inside the beginning of the main container.

$('.blog-listing .post-item .post-author').each(function() {
	$(this).parent().parent().prepend($(this));
});

You can analyze the code of these 2 cases. The results are the same, but the problem with the case 2 is that if you add another div, the code will no longer work properly because it will navigate up 2 times in your html structure

Move Child Element in the Same Div (using Parent Container)

If you want to move child element in the same container (referring to author div) you need navigate to the parent container and insert the author div above the date container.

Case 1 - Exact Target

Move child element in the same container (using relative target):

$('.blog-listing .post-item .post-author').each(function() {
	$(this).parent().prepend($(this));
});

Case 2 - Relative Target

Move child element in the same container (specifying the exact target):

$('.blog-listing .post-item .post-author').each(function() {
	$(this).parent().find('.post-author').before($(this));
});

Conclusion

This technique is helpful when you don't have access to html source or you use some fancy CMS and you don't want to mess with the php code. Is very easy to use and this will not cause any problems at all.

Make sure to use the code if you have a similar structure with repetitive items, so you can target each item and move child element position wherever you need inside that item. Let me know if this helped you in your project. Below you can see a live example or download the files.

Live Demo

Download Files