Working with a Component Body in JavaScript

These are useful and common patterns for working with a component’s body in JavaScript.

Replace a Component's Body

In these examples, cmp is a reference to a component in your JavaScript code. It’s usually easy to get a reference to a component in JavaScript code. Remember that the body attribute is an array of components, so you can use the JavaScript Array methods on it.

Note

Note

When you use cmp.set("v.body", ...) to set the component body, you must explicitly include {!v.body} in your component markup.

To replace the current value of a component’s body with another component:

// newCmp is a reference to another component
cmp.set("v.body", newCmp);

Clear a Component's Body

To clear or empty the current value of a component’s body:

cmp.set("v.body", []);

Append a Component to a Component's Body

To append a newCmp component to a component’s body:

var body = cmp.get("v.body");
// newCmp is a reference to another component
body.push(newCmp);
cmp.set("v.body", body);

Prepend a Component to a Component's Body

To prepend a newCmp component to a component’s body:

var body = cmp.get("v.body");
body.unshift(newCmp);
cmp.set("v.body", body);

Remove a Component from a Component's Body

To remove an indexed entry from a component’s body:

var body = cmp.get("v.body");
// Index (3) is zero-based so remove the fourth component in the body
body.splice(3, 1);
cmp.set("v.body", body);