YumJS Before and After Documentation

before() and after()


before() and after() are Yum methods to move elements around in the DOM and mimic JavaScript's built in methods of the same names.

The Yum versions come with the added benefit of being chainable to other methods.

In JavaScript you might do:



// Normal JS

const h2 = document.querySelectorAll('h2')[0]; // get first h2

const button = document.querySelectorAll('.button')[0]; // get first button



// JS before()

h2.before(button); // normal JS puts button before h2



//JS after()

h2.after(button); // normal JS puts button after h2


In Yum you can do:



let h2 = yum('h2')._[0]; // get first h2

let button = yum('.button')._[0]; // get first .button
let button = yum('.button').first; // OR get first .button



// Yum before()

yum(h2).before(button); // Yum JS puts button before h2



// Yum after()

yum(h2).after(button); // Yum JS puts button after h2



// *** before() and after() are now chainable in Yum

yum(h2).after(button).text('moved').fadeOut(); 


HTML strings as parameters


Just like normal JS (and JQuery) before() and after() can accept HTML. However, you should try not to use that feature because it is more prone to error.

If you really have a need to pass in HTML strings as a parameter to before() or after() then you should probably rethink your design strategy.

However if you really want to do it, Yum has a cleaner, less error prone way to do it...


// before and after using HTML strings
// Yum's first approach is cleaner and less error prone 

//1st way (cleanest)

const but = yum()._createNode('span');
yum(but).text('button inserted'); //or html()
yum(h2).before(but);



// 2nd way with HTML as strings dirty/error prone

const button = yum('<span>button inserted </span>')._[0];
// OR
const button = yum('<span>button inserted </span>').first;
yum(h2).before(but);



//3rd way like JS but still dirty
yum(h2).before('<span>button inserted</span>');  



If you have any questions about Yum please contact me.