Dominator.js | prependTo Property

Using the 'prependTo' Property in Dominator.js

The 'prependTo' property in Dominator.js specifies where the created element will be prepended in the DOM. It works similarly to the 'appendTo' property, but instead of adding the element to the end, it is inserted at the beginning of the target element's content.

prependTo as a String Query:

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

Example Usage (String Query):

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

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

prependTo as an HTML Element:

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

Example Usage (HTML Element):

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

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

Using 'prependTo' as either a string or a direct reference to an HTML element gives flexibility in how and where elements are prepended in the DOM. Whether you prefer working with CSS selectors or direct DOM manipulation, the 'prependTo' property provides an easy solution.