Dominator.js | appendTo Property

Using the 'appendTo' Property in Dominator.js

The 'appendTo' property in Dominator.js specifies where the created element will be appended in the DOM. It accepts either a string query selector or a direct reference to an HTML element.

appendTo as a String Query:

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

Example Usage (String Query):

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

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

appendTo as an HTML Element:

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

Example Usage (HTML Element):

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

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

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