Dominator.js | Nested Elements

Understanding the children Property

The children property in Dominator.js allows you to define nested elements within a parent element. It can either be an **object**, an **array of objects**, or a **function that returns child elements dynamically**.

Example Usage:

1. Single Child Element (Object)

D$({
    element: 'div',
    css: { backgroundColor: '#3498db', padding: '15px', borderRadius: '5px', color: '#fff' },
    text: 'Parent Section with One Child',
    children: { element: 'p', text: 'Single Child' },
    appendTo: '.example-output'
});
                

2. Multiple Child Elements (Array of Objects)

D$({
    element: 'div',
    css: { backgroundColor: '#2ecc71', padding: '15px', borderRadius: '5px', color: '#fff' },
    text: 'Parent Section with Multiple Children',
    children: [
        { element: 'p', text: 'Child 1' },
        { element: 'p', text: 'Child 2' }
    ],
    appendTo: '.example-output'
});
                

3. Dynamic Children (Function)

D$({
    element: 'div',
    css: { backgroundColor: '#f39c12', padding: '15px', borderRadius: '5px', color: '#fff' },
    text: 'Parent Section with Dynamic Children',
    children: function(parent) {
        return [
            { element: 'p', text: 'Dynamic Child 1' },
            { element: 'p', text: 'Dynamic Child 2' }
        ];
    },
    appendTo: '.example-output'
});
                

Explanation:

• element: Defines the HTML tag to create.
• children: Specifies the nested element(s) inside the parent. It can be:
  • Object: A single child element.
  • Array of Objects: Multiple child elements.
  • Function: A function that returns child elements dynamically. The function receives the parent element as an argument.
• appendTo: Determines where the element is inserted in the DOM.