Dominator.js | Child Property

Using the 'child' Property in Dominator.js

The 'child' property in Dominator.js allows you to easily create and nest child elements inside a parent element. The value of the 'child' property can be either an object or a function.

Child Property as an Object:

When the 'child' property is an object, it behaves similarly to other properties in the Dominator API, allowing you to define an element and its attributes (like text, CSS, etc.). This is the most common use case when nesting child elements.

Example Usage (Object):

                    D$({
                        element: 'div', 
                        css: { 
                            backgroundColor: '#4a5764', 
                            padding: '10px', 
                            borderRadius: '5px' 
                        }, 
                        text: 'parent section', 
                        child: { 
                            element: 'p', 
                            text: 'child section', 
                            css: { 
                                backgroundColor: '#ddd', 
                                padding: '3px', 
                                color: '#000' 
                            } 
                        },
                        appendTo: '.example-output'
                    });
                

This code creates a parent <div> element with a nested child <p> element. The parent <div> has some CSS styling, and the child <p> element is styled differently. Both elements are appended to the DOM.

Child Property as a Function:

The 'child' property can also be a function. In this case, the parent element is passed as a parameter to the function. This approach is useful when you need to perform additional operations or logic with the parent element before defining or manipulating the child element.

Example Usage (Function):

                    D$({
                        element: 'div',
                        text: 'parent section',
                        child: (parent) => {
                            D$( { 
                                element: 'p', 
                                text: 'child section', 
                                css: { backgroundColor: '#ddd', padding: '3px', color: '#000' }, 
                                appendTo: parent 
                            });
                        },
                        appendTo: '.example-output'
                    });
                

This code creates a <div> element with a nested <p> element. The child element is created inside the function, where the parent <div> element is passed as the parent parameter. The child is then appended to this parent element.

Using a function for the 'child' property allows for more dynamic behavior. You can access and manipulate the parent element before defining the child, making it very flexible for scenarios where additional logic is required.