Dominator.js | replaceTarget Property

Using the 'replaceTarget' Property in Dominator.js

The 'replaceTarget' property in Dominator.js allows you to replace an existing target element in the DOM with a newly created element. This is particularly useful when you want to replace a specific element or content dynamically, rather than adding a new element alongside the target.

replaceTarget as a String Query:

When the 'replaceTarget' value is a string, it acts as a CSS selector, and the created element will replace the first matching element found in the DOM.

Example Usage (String Query):

                D$({ 
                    element: 'div', 
                    text: 'This will replace the target element', 
                    replaceTarget: 'section.example-output' 
                });
            

This code creates a <div> element with the text "This will replace the target element" and replaces the first <section class="example-output"> element with the new content.

replaceTarget as an HTML Element:

The 'replaceTarget' value can also be an HTML element reference. In this case, the created element will replace the specified target element directly in the DOM.

Example Usage (HTML Element):

                const targetElement = document.querySelector('.example-output');
                D$({ 
                    element: 'div', 
                    text: 'This will replace the target element', 
                    replaceTarget: targetElement 
                });
            

This code creates a <div> element with the text "This will replace the target element" and replaces the <div class="example-output"> element with the new content.

The 'replaceTarget' property is a powerful tool for dynamically replacing content in the DOM with a newly created element, either by using a CSS selector or directly referencing the target element.