Dominator.js | fillTarget Property

Using the 'fillTarget' Property in Dominator.js

The 'fillTarget' property in Dominator.js is used to insert the created element directly into an existing target element, effectively filling it with the new content. This property is useful when you want to replace the content of an element or fill a container with new child elements.

fillTarget as a String Query:

When the 'fillTarget' value is a string, it is a CSS selector, and the created element will be inserted into the first matching element in the DOM.

Example Usage (String Query):

                D$({ 
                    element: 'div', 
                    text: 'Filled content in target element', 
                    fillTarget: '.example-output' 
                });
            

This code creates a <div> element with the text "Filled content in target element" and places it inside the first element that matches the .example-output selector.

fillTarget as an HTML Element:

The 'fillTarget' value can also be an HTML element reference. In this case, the created element will be inserted into the target element passed as the reference.

Example Usage (HTML Element):

                const targetElement = document.querySelector('.example-output');
                D$({ 
                    element: 'div', 
                    text: 'Filled content in target element', 
                    fillTarget: targetElement 
                });
            

This code creates a <div> element with the text "Filled content in target element" and places it inside the element referenced by targetElement.

The 'fillTarget' property allows you to easily place the created element into an existing target element, replacing its content, or simply filling it with new content.