Milk Admin

eI() eIs() Functions

Creating a new element

Vanilla JavaScript

const newElement = document.createElement('div', 'my class');

With eI()

You can use the same createElement syntax 
const newElement = eI('div', 'my class');
Or you can directly write HTML 
const newElement = eI('<div class="my class">Text</div>');

Selecting an element by ID

Vanilla JavaScript

const newElement = document.getElementById('myId');

With eI()

const newElement = eI('#myId');

Selecting an element by classes

Vanilla JavaScript

const newElement = document.querySelector('.jsClass');

With eI()

const newElement = eI('.jsClass');

AppendTo

Vanilla JavaScript

el = createElement('div');
el.textContent = 'My Div';
container.appendChild(el)

With eI()

eI('div', {text: 'My Div', to: container});
Or eI(el).eI(el2) returns the DOM of el2! 
eI(container).eI('div', {text: 'My Div'});

Modifying an existing element

Vanilla JavaScript

const targetElement = document.getElementById('targetElement');
targetElement.textContent = 'Modified text!';
targetElement.style.color = 'red';

With eI()

eI('#targetElement', {
text: 'Modified text!',
style: { color: 'red' }
});

Adding an event

Vanilla JavaScript

const button = document.getElementById('exampleButton');
button.addEventListener('click', () => {
alert('You clicked the button!');
});

With eI()

eI('#exampleButton', {
click: () => alert('You clicked the button!')
});

Replacing an existing element

Vanilla JavaScript

const oldElement = document.getElementById('oldElement');
const newElement = document.createElement('div');
newElement.textContent = 'New element!';
oldElement.parentNode.replaceChild(newElement, oldElement);

With eI()

eI('<div>New element!</div>', {
replaceChild: '#oldElement'
});

Adding styles and classes

Vanilla JavaScript

const styledElement = document.getElementById('styledElement');
styledElement.classList.add('text-success', 'fw-bold');
styledElement.style.fontSize = '20px';

With eI()

eI('#styledElement', {
class: 'text-success fw-bold',
style: { fontSize: '20px' }
});

Adding an element with multiple attributes

Vanilla JavaScript

const customElement = document.createElement('div');
customElement.textContent = 'Element with custom attributes';
customElement.setAttribute('data-custom', 'value');
document.getElementById('example6').appendChild(customElement);

With eI()

eI('<div data-custom="value">Element with custom attributes</div>', {
to: '#example6'
});

Removing an element

Vanilla JavaScript

const elementToRemove = document.getElementById('elementToRemove');
elementToRemove.parentNode.removeChild(elementToRemove);

With eI()

eI('#elementToRemove', {
remove: true
});

Available options for eI()

Option Type Description
to string or HTMLElement Adds the element as a child of another element.
before string or HTMLElement Inserts the element before another element.
after string or HTMLElement Inserts the element after another element.
replace string or HTMLElement Replaces the content of an element with the current element.
replaceChild string or HTMLElement Completely replaces an element with the current element.
remove boolean Removes the element from the DOM.
click, mouseover, etc. function Adds event handlers like click, mouseover, etc.
style object Applies CSS styles to the element.
class string or array Adds one or more classes to the element.
removeClass string Removes a specific class from the element.
replaceClass array Replaces one class with another.
id string Sets the element's ID.
text string Sets the element's text.
html string Sets the element's inner HTML.

Using eI as a DOM function

DOM elements called by eI acquire two methods: eI and eIs.
eI(el1).eI(el2). The el2 is inserted inside el1 via appendChild. The function returns el2.

Vanilla JavaScript

// Create a div with classes and add it to a container
const newElement = document.createElement('div');
newElement.classList.add('alert', 'alert-info');
newElement.textContent = 'Element created with createElement';
document.getElementById('createElement').appendChild(newElement);

With eI()

// Create a div with classes and add it to a container
el = eI('#createElement').eI('div', 'alert alert-info');
el.textContent = 'Element created with createElement';

Adding properties to elements at any time

Vanilla JavaScript


const dynamicElement = document.getElementById('dynamicElement');
dynamicElement.textContent = 'Element created with createElement';

With eI()

eI('#dynamicElement', { text: 'Element created with createElement' });

4. Using eIs() with a selector and a function

Vanilla JavaScript

// Apply a function to all <li> elements within a <ul>
const listItems = document.querySelectorAll('ul li');
listItems.forEach((el, i) => {
el.classList.add('list-item');
el.textContent = `Element ${i + 1}`;
});

With eIs()

// Apply a function to all <li> elements within a <ul>
eIs('ul li', (el, i) => {
el.classList.add('list-item');
el.textContent = `Element ${i + 1}`;
});

5. Using eIs() with a NodeList and a function

Vanilla JavaScript

// Get a NodeList of all elements with the .myClass class
const nodeList = document.querySelectorAll('.myClass');

// Apply a function to all elements in the NodeList
nodeList.forEach((el, i) => {
el.classList.add('highlight');
el.textContent = `Element ${i + 1} highlighted`;
});

With eIs()

// Get a NodeList of all elements with the .myClass class
const nodeList = document.querySelectorAll('.myClass');

// Apply a function to all elements in the NodeList
eIs(nodeList, (el, i) => {
el.classList.add('highlight');
el.textContent = `Element ${i + 1} highlighted`;
});

8. Adding an element with animation

Vanilla JavaScript

document.getElementById('addButton').addEventListener('click', () => {
const newElement = document.createElement('div');
newElement.textContent = 'Element ' + counter;
newElement.classList.add('box', 'fade-in');
document.getElementById('container').appendChild(newElement);
counter++;
});

With eI()

let counter = 1;
eI('#addButton', {
click: () => {
eI('<div class="box fade-in">Element ' + counter + '</div>', {
    to: '#container'
});
counter++;
}
});