Dominator.js | before Property

Using the 'before' Property in Dominator.js

The 'before' property in Dominator.js specifies where the created element will be inserted in the DOM, relative to a target element. The created element will be placed immediately before the specified target element.

before as a String Query:

When the 'before' value is a string, it represents a CSS selector. The element is inserted before the first matching element in the DOM that corresponds to the provided query.

Example Usage (String Query):

                D$({ 
                    element: 'div', 
                    text: 'Hello, world!', 
                    before: '.example-output' 
                });
            

This code creates a <div> element with the text "Hello, world!" and places it immediately before the first <section> element that matches the .example-output selector.

before as an HTML Element:

The 'before' value can also be an HTML element reference. In this case, the created element will be inserted directly before the specified element in the DOM.

Example Usage (HTML Element):

                const targetElement = document.querySelector('.example-output');
                D$({ 
                    element: 'div', 
                    text: 'Hello, world!', 
                    before: targetElement 
                });
            

This code creates a <div> element with the text "Hello, world!" and places it immediately before the element referenced by targetElement.

The 'before' property provides a simple and effective way to control the positioning of created elements in relation to other elements in the DOM.