# append method

The `append` method allows you to insert another element at the end of an element. The method takes an element as a parameter, usually created with `createElement`, or a string. You can add several elements or strings at once by listing them separated by commas.

## Syntax

`parent.append(element or string);`

## Example

Let's create a paragraph, set its text and place it on a page at the end of the `#parent` block:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div>` `let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.textContent = '!'; parent.append(p);`

The code execution result:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> <p>!</p> </div>`

## Example

Let's put several paragraphs at once at the end of the `#parent` block:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div>` `let parent = document.querySelector('#parent'); let p1 = document.createElement('p'); p1.textContent = 'a'; let p2 = document.createElement('p'); p2.textContent = 'b'; parent.append(p1, p2);`

The code execution result:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> <p>a</p> <p>b</p> </div>`

## Example

Let's use a string as a method parameter:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div>` `let parent = document.querySelector('#parent'); parent.append('!');`

The code execution result:

`<div id="parent"> <p>1</p> <p>2</p> <p>3</p> ! </div>`

## Example

`ul` is given. Let's place `9` `li` tags in it, while setting serial numbers as their text:

`<ul id="parent"></ul>` `let parent = document.querySelector('#parent'); for (let i = 1; i <= 9; i++) { let li = document.createElement('li'); li.textContent = i; parent.append(li); }`

The code execution result:

`<ul id="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>`

## Example

Let's populate a table with tr's and td's:

`<table id="table"></table>` `let parent = document.querySelector('#table'); for (let i = 1; i <= 3; i++) { let tr = document.createElement('tr'); // we create a tr // We populate tr with td's: for (let j = 1; j <= 3; j++) { let td = document.createElement('td'); // we create a td td.textContent = j; // write a text in it tr.append(td); // add the created td to the end of the tr } table.append(tr); // add the created tr to the end of the table }`

The code execution result:

`<table id="table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>`

## See also

- the `prepend` method
  that inserts elements at the start
- the `appendChild` method
  that inserts elements at the end
- the `insertBefore` method
  that inserts an element before an element
- the `insertAdjacentElement` method
  that inserts an element at the given location
- the `insertAdjacentHTML`,
  that inserts tags at the given location

← →
↑
en ru