Rendering Components Guide

The quick start tutorial explains how to create and render a new component. In its examples components are always being appended directly to the document's body though, but what's usually necessary is to render in a specific position.

Replacing an Existing Element

If you wish your component to replace an existing element on the DOM, you just need to pass it (or a selector for it) as the element property of the constructor configuration, like this:

// Passsing the element itself
new Modal({element: elementToReplace});

// Passing a selector to the element
new Modal({element: '#elementToReplace'});

Specifying the Parent

You can also specify the parent element that should receive the component's contents via the second constructor param, like this:

// Passing the element itself
new Modal(data, parentElement);

// Passing a selector to the element
new Modal(data, '#parentElement');