Blog

Instructions on how to write code to move divs into other divs or add new html code through javascript.

The general structure of the code is as follows

$('.div_to_move').movementFunction('.div_to_be_moved_to');

There are several movement functions we can use:

.appendTo()

  Adds the left object INSIDE the right object at the bottom

.prependTo()

  Adds the left object INSIDE the right object at the top

.insertBefore()

  Adds the left object OUTSIDE the right object above

.insertAfter()

  Adds the left object OUTSIDE the right object above

You will target the elements using CSS calls. Any valid css will work.

Examples:

$('.button').appendTo('.header');

$('#button').prependTo('header');

$('.slider .button').insertBefore('.header');

$('.slider > .button.green').insertAfter('.header');

Adding in new html

You can also use the same code to add in html to a page. You just replace the div to be moved with the html you want to add.

Example:

$('

Hello

If the html that you need to add to the website uses quote marks (for example, an a tag's href) you just have to make sure the quotes wrapping the html and the href are different

Examples:

$("

Hello

$('

Hello

It doesn't matter which type of quote you use, both work just fine, all that matters is the consistency. I generally use single quote ' just because it is easier.

Bonus

There are other functions in jquery which do the same as the ones listed above, but put the right object into the left object. 

They are:

.append()

  Adds the right object INSIDE the left object at the bottom

.prepend()

  Adds the right object INSIDE the left object at the top

.before()

  Adds the right object OUTSIDE the left object above

.after()

  Adds the right object OUTSIDE the left object above

It is completely up to you if you want to use these or not. Both work the exact same but the left and right objects are switched. Just mentioning them here in case you see them used somewhere.