DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

1 1

⛳️Before and After⛳️ in JS

// Select the original button using jQuery
const button = $('button');

// Create a new button that says 'Info'
const infoBtn = document.createElement('button');
infoBtn.classList.add('btn', 'btn-primary', 'px-5');
infoBtn.innerText = 'Info';

// Create a new button that says 'Cancel'
const cancelBtn = document.createElement('button');
cancelBtn.classList.add('btn', 'btn-secondary', 'px-5');
cancelBtn.innerText = 'Cancel';

// Place the 'Info' button before the original button
button.before(infoBtn);

// Place the 'Cancel' button after the original button
button.after(cancelBtn);

// Just for fun, let's imagine these buttons in action
console.log("The Info button is like the appetizer, it comes before the main course!");
console.log("The Cancel button is like dessert, it comes after everything else is done!");
Enter fullscreen mode Exit fullscreen mode

Image description

In this version, the before and after methods are used with a humorous analogy, comparing the placement of the buttons to courses in a meal:

The infoBtn (Info button) is placed before the original button, likened to an appetizer.
The cancelBtn (Cancel button) is placed after the original button, likened to dessert.
This adds a fun and relatable context to understanding how the buttons are positioned in relation to the original button.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay