⛳️Before and After⛳️ in JS

__khojiakbar__

_Khojiakbar_

Posted on June 26, 2024

⛳️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.

💖 💪 🙅 🚩
__khojiakbar__
_Khojiakbar_

Posted on June 26, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024