Dominator.js | HTML Property (Nesting)

Using the 'html' Property with Dominator Nesting

The 'html' property in Dominator.js allows you to set or get the inner HTML content of an element. This property is helpful when you want to inject HTML content inside an element while nesting it in the DOM. It can be used to add more complex structures, including nested elements, as content.

Example Usage:

1. Create a div element with HTML content and append it to .example-output

                    D$({element: 'div', html: '<p>Hello World Dominator</p>', appendTo: '.example-output'});
                

This code creates a <div> element, and inside it, a paragraph element with the text "Hello World Dominator" is added using the html property. The resulting <div> element is appended to an element with the class .example-output.

2. Create a section element with nested HTML content and append it to .example-output

                    D$({element: 'section', html: '<h2>This is a header</h2><p>This is a paragraph</p>', appendTo: '.example-output'});
                

This code creates a <section> element and nests an <h2> header and a <p> paragraph inside it. The entire section is then appended to the .example-output element.

The 'html' property can be used to inject any valid HTML content into the element. It is particularly useful for dynamically adding nested HTML structures.