Dominator.js | Nested Elements

Understanding Dominator and Nested Element Creation

Dominator is a powerful JavaScript framework designed to simplify DOM manipulation. It allows developers to create, style, and manipulate HTML elements with ease. One of the key features of Dominator is the ability to create nested elements, which enables the construction of complex DOM structures in a clean, declarative way.

Example Usage:

1. Create an element and pass it directly to Dominator

                    D$({ element: 'p' });
                

This creates a simple <p> element. It can be styled and manipulated further using other properties.

2. Create an element with a nested property

                    D$({ nested: { element: 'p' } });
                

In this example, a <p> element is created with an embedded nested property that defines the nested structure of the element. The nesting functionality allows for complex element trees to be created in a readable format.

Explanation of Key Properties:

The following properties can be used to customize the behavior of the created elements:

• element: This property defines the type of the HTML element that will be created. In the example, <p> is the element being created, but this can be customized to any valid HTML element such as <div>, <span>, etc.

                        D$({ element: 'p' });
                    

This creates a <p> element that can be manipulated further using the other properties in Dominator.

• nested: The nested property is used to define child elements inside a parent element. The nested structure allows for creating more complex DOM structures, where elements can contain other elements.

                        const nested = {
                            element: 'p',
                            children: {
                                element: 'span',
                                text: 'Nested element'
                            }
                        };
                        D$(nested);
                    

This creates a <p> element containing a <span> element.

• appendTo: This property appends the created element to an existing DOM element. The value can be either a string selector or an actual DOM element reference.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            appendTo: 'div.dominator-content'
                        };
                        D$(nested);
                    

This appends the <p> element with a <span> child to the target element matching the div.dominator-content selector.

• prependTo: Similar to appendTo, this property prepends the created element to an existing DOM element.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            prependTo: 'div.dominator-content'
                        };
                        D$(nested);
                    

This prepends the <p> element to the div.dominator-content element.

• before: The created element is placed before an existing DOM element.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            before: 'div.dominator-content'
                        };
                        D$(nested);
                    

This places the <p> element before the div.dominator-content element.

• after: This property moves the created element after an existing DOM element.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            after: 'div.dominator-content'
                        };
                        D$(nested);
                    

The <p> element will be inserted after the div.dominator-content element.

• fillTarget: This property will fill the specified target element with the newly created Dominator element.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            fillTarget: 'div.dominator-content'
                        };
                        D$(nested);
                    

This fills the target div.dominator-content with the <p> and its child <span> element.

• replaceTarget: This property replaces the target element with the newly created Dominator element.

                        const nested = {
                            element: 'p',
                            text: 'Welcome to Dominator',
                            children: {
                                element: 'span',
                                text: 'Good',
                                css: { display: 'block' }
                            },
                            replaceTarget: 'div.dominator-content'
                        };
                        D$(nested);
                    

This replaces the content of the target div.dominator-content with the <p> element.