Maximizing Jquery: Modern Web Programming Techniques (Part 2)

Welcome back to my "Maximizing Jquery" series! I hope you all enjoyed the previous part, where we learned in depth techniques of various functions which can be used with the on() function to detect user inputs or changes on a web page.

In this second part of the series we will look at techniques to manipulate elements in the DOM (Document Object Model, basically our web page) and dynamically move them across the DOM as well as modify their contents. Combined with javascript media queries, we will learn how to move elements around the DOM in real time.

1. appendTo() Function

In simple terms, the appendTo function is used to move an element to anywhere else we desire in the DOM, specifically at the end of the target element. Let's take an example.

<header>
    <button>Move Logo</button>
    <img class="logo" src="logo.png" alt="logo"/>
</header>

<footer></footer>

Let's say we wish to move our logo which is in the header, to our footer, when a user clicks on something or when the screen width is set for a mobile user for example. Whatever the reason may be, it may be very useful to perform this action, so let us see how we can achieve this with only a few lines of code.

*Note: the following requires some concepts we saw in part 1, so make sure you read that post before continuing.

$('button').on('click', function() {
   $('.logo').appendTo('.footer');
});

this will result in the following DOM changes:

<header>
    <button>Move Logo</button>

</header>

<footer>
    <img class="logo" src="logo.png" alt="logo"/>
</footer>

As you can guess, clicking on the button will move our logo from the header and to the footer. In the second line of code we specify an element and inside the parameters of appendTo() we specify the target element where to add our logo image to.

Sidenote: how would we style this dynamically added logo? Simple, in CSS we may have had earlier something like:

header .logo {
width:100px;
height:100px
}

To style our new element we would simply add:

footer .logo {
width:50px;
height:50px;
filter: grayscale();/*maybe make it b&w */
}

And voila we now have a dynamically added element on user input! We can equally bind this action to an event such as screen width. Say we wish to, in a more likely scenario, move the logo from the header to the footer on mobile device for responsive solutions, we can set a javascript media query and trigger our appendTo() function based on screen widths:

function myFunction(x) {
  if (x.matches) { 
    $('.logo').appendTo('.footer');//if screen is 700px or less move logo  
  } 
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x)

1. prependTo() Function

The prependTo() function is identical to the appendTo() function except it moves our element to the beginning of our target element instead of at the end.

3. insertAfter() & insertBefore() Functions

What if we want to insert our logo after or before our footer, instead of inside the footer? Well, we could use the insertAfter or insertBefore functions. Needless to say, insertAfter() will insert our logo immediately after the footer and insertBefore() will insert our logo immediately before the footer.

These functions work essentially the same way as the previous appendTo and prependTo functions we just saw.

$('button').on('click', function() {
   $('.logo').insertAfter('.footer');
});

the resulting html is the following:

<header>
    <button>Move Logo</button>

</header>

<footer>
</footer>
<img class="logo" src="logo.png" alt="logo"/>

Our logo is inserted after the footer element

And of course insertBefore() will isnert our logo before the footer element.

That wraps up this simple but powerful tutorial on how to dynamically add and move around elements in our web pages in real time or on user trigger actions. This is especially useful when we would like sidebars to move around our page when the screen of the user is too small to accomodate some content and the sidebar horizontally. Our solution could keep the sidebar on large enough screens and automatically move the sidebar somewhere else when the user's screen width is smaller.
If we attempted to solve this issue with css only we quickly realize it will only help us change the width or style of the sidebar but not the its placement in the DOM.

As always i hope you enjoyed the post and learned something from it!
See you very soon in part 3.

Uriel Bitton
www.scorpionedge.com
[e-mail]

---

Check out my new project - a javascript framework that helps you design beautiful web using less code: ReactorJS is available now!
www.reactor-js.com