# container

***

Type: `{String|Object}`

Default: `document.body`

***

Defines the container where selection is allowed.

***

{% hint style="info" %}
This option was previously known as `appendTo`.
{% endhint %}

***

You can pass either a CSS3 selector string or a node reference.

It's best to define the container as the closest ancestor to the items as possible and not have any other interactive elements (buttons, inputs, etc) within it as interacting with them will unselect the selectable items.

{% hint style="info" %}
If you have multiple instances and don't define a container with the [container](https://mobius-studios.gitbook.io/selectable/api/options/container) option, any events you have attached to them will fire at the same time as they all share the same container (`document.body`). This can lead to other unwanted effects like deselection of all other instances items when clicking / tapping on the one instance.
{% endhint %}

***

### Example

```javascript
new Selectable({
    container: "#container"
});

// or

new Selectable({
    container: document.getElementById("container")
});
```

***

The container can be updated dynamically with the [`setContainer()`](https://mobius-studios.gitbook.io/selectable/api/methods/setcontainer) method.