> 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/.createelement.md).

# .createElement()

The Jscula createElement() is use to create an Element into selected DOM element

### Examples:

This code will create a p element and insert into the element with the ID of `mydiv`

```javascript
$("#mydiv").createElement('p');
```

### Returns

* The Created element.

### Create a div element

```javascript
$("body").createElement('div');
```

### Create element with classes and id

```javascript
$("body").createElement('div.myclass1');

//output:
<body>
    <div class="myclass1"></div>
</body>
```

```javascript
$("body").createElement('div.animate.active.faster#element20');

//output:
<body>
    <div class="animate active faster" id="element20"></div>
</body>
```

```javascript
$("body").createElement('div.#uid34'); 

//output: 
<body>
    <div id="uid34"></div>
</body>
```

### Prepend

this will create and insert it to the start of the selected element. By just passing true as the 2nd paramter.

```javascript
$("ul").createElement('li',true);
```

```javascript
$("html").createElement({nodeName:'head'},true);
```

### Define attributes as you create

```javascript
$('mydiv').createElement({ 
 nodeName: 'p', 
 id: 'paragraph2', 
 textContent: 'I love Jscula' , 
 className:'myP' 
}); 


/* OUTPUT: 

 <div class="mydiv">
    <p id="paragraph2" class="myP">I love Jscula </p>
</div>

*/
```

### Creating an Element for Multiple elements

```javascript
const lists = $('nav ul li*'); //returns NodeList 

lists.createElement({ 
 nodeName: 'a', 
 href: 'javascript:void(0)', 
 textContent: 'click me' 
}, true);
```

{% hint style="info" %}
📝 It uses exactly Javascript naming scheme for DOM Elements. e.g, nodeName, textContent, className, id, ... etc
{% endhint %}