> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/manipulation/.append.md).

# .append()

### Parameters of **J**scula append() method

| Parameter                | Description                                                                                                                                                                                         |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Content                  | <p>It is a mandatory parameter. It specifies the content which you want to insert. Its possible values are:</p><ul><li>HTML elements</li><li>DOM elements</li></ul>                                 |
| Function (current\_html) | <p>It is an optional parameter. It specifies the function that returns the content to insert.</p><ul><li>current\_html<strong>:</strong> The current HTML of the selected element.</li></ul><p></p> |
| prepend? (boolean)       | <p>if true, the content is inserted at the beginning of the selected element, if false it goes to the end of the element.<br>Default is false.</p>                                                  |

### Append HTML String

```javascript
$("p").append("<b>Newly added appended text</b>."); 
//the element is inserted at the end of the selected element
```

```javascript
$("ol").append("<li><b>Newly added appended item</b></li>",true);
//this goes to the beginning of the selected element
```

### Inserting DOM Element

The following code query's an element with the ID of mylink and insert into the p element

<pre class="language-javascript"><code class="lang-javascript"><strong>$("p").append($('#mylink'));
</strong></code></pre>

### Prepend element

The following code query's an element with the ID of .text and insert at the beginning of the div element

<pre class="language-javascript"><code class="lang-javascript"><strong>$("#div").append($('#text'),true);
</strong></code></pre>

### Inserting content using a function

```javascript
$("p").append(function(html){
  return "<b>This is the html content for this p </b> <br/>"+html;
});
```

### Inserting Array of elements or Nodelists

```javascript
const mylists = $('ul li*'); //this returns NodeLists
$("#div").append(mylists);

$("#div").append([$('a'),$('p'),$('mydiv')]);
```

```javascript
const mytext = $('#text');
const div = $('.my-containter');
const p = $('#p');

$("#div").append([p,div,mytext]);
```