# append

```ts
import { append } from 'cx/data';
```


`append` creates a new array with items added to the end. Handles null/undefined arrays gracefully.

```tsx
import { append, createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button, Grid, TextField } from "cx/widgets";

interface Item {
  id: number;
  name: string;
}

interface Model {
  items: Item[];
  newName: string;
  nextId: number;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.items, [
      { id: 1, name: "First" },
      { id: 2, name: "Second" },
    ]);
    this.store.set(m.nextId, 3);
  }

  addItem() {
    const name = this.store.get(m.newName);
    if (!name) return;

    const id = this.store.get(m.nextId);
    this.store.update(m.items, (items) => append(items, { id, name }));
    this.store.set(m.nextId, id + 1);
    this.store.set(m.newName, "");
  }

  addMultiple() {
    const id = this.store.get(m.nextId);
    this.store.update(m.items, (items) =>
      append(items, { id, name: "Item A" }, { id: id + 1, name: "Item B" }),
    );
    this.store.set(m.nextId, id + 2);
  }

  reset() {
    this.onInit();
  }
}

export default (
  <div controller={PageController}>
    <Grid
      records={m.items}
      columns={[
        { header: "ID", field: "id", align: "center" },
        { header: "Name", field: "name" },
      ]}
    />
    <div style="margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap">
      <TextField value={m.newName} placeholder="Enter name..." />
      <Button onClick="addItem">Add Item</Button>
      <Button onClick="addMultiple">Add Multiple</Button>
      <Button onClick="reset">Reset</Button>
    </div>
  </div>
);

```

## Signature

```ts
function append<T>(array: T[], ...items: T[]): T[]
```

## Parameters

| Parameter | Type   | Description                          |
| --------- | ------ | ------------------------------------ |
| `array`   | `T[]`  | The source array (can be null/undefined). |
| `items`   | `T[]`  | Items to append.                     |

## Return Value

Returns a new array with items appended. If `array` is null/undefined, returns the items as a new array.

## Examples

### Basic usage

```ts
const items = [1, 2, 3];
const result = append(items, 4, 5);
// [1, 2, 3, 4, 5]

// Original array is unchanged
console.log(items); // [1, 2, 3]
```

### With null array

```ts
const result = append(null, 1, 2);
// [1, 2]
```

### No items to append

```ts
const items = [1, 2, 3];
const result = append(items);
// [1, 2, 3] - returns empty array if source is null, otherwise same reference
```

## See Also

- [insertElement](/docs/utilities/insert-element) - Insert at specific position
- [updateArray](/docs/utilities/update-array) - Update items in array