# JavaScript insertAdjacentHTML and insertAdjacentElement

## insertAdjacentHTML
**insertAdjacentHTML** is used to insert HTML string  at a specific position.

### syntax


```
element.insertAdjacentHTML(position, text);
``` 
There are four possible value for **position** parameter - 

<table>
    <tbody>
        <tr>
            <td><b>Value</td>
            <td><b>Description</td>
        </tr>
        <tr>
            <td>'beforebegin'</td>
            <td>Insert the HTML element before the specified element.
	  </td>
    </tr>        <tr>
            <td>'afterbegin' </td>
            <td>
	            Insert the HTML element inside the specified element, but before its first child. Newly added element would be first child of the element.
	  </td>
    </tr><tr>
            <td>'beforeend'</td>
            <td>
	            Insert the HTML element inside the specified element, but after its last child. Newly added element would be last child of the element.
	  </td>
    </tr><tr>
            <td>'afterend' </td>
            <td>
	             Insert the HTML element after the specified element.
	  </td>
    </tr>
    </tbody>
</table>

Datatype of **position** parameter is String and it's value is case sensitive

**text** parameter value is the HTML string which needs to be parsed and inserted into DOM tree.


## insertAdjacentElement
**insertAdjacentElement** is used to insert a HTML element at a specific position.

### syntax


```
element.insertAdjacentElement(position, element);
``` 
There are four possible value for **position** parameter - 

<table>
    <tbody>
        <tr>
            <td><b>Value</td>
            <td><b>Description</td>
        </tr>
        <tr>
            <td>'beforebegin'</td>
            <td>Insert the HTML element before the specified element.
	  </td>
    </tr>        <tr>
            <td>'afterbegin' </td>
            <td>
	            Insert the HTML element inside the specified element, but before its first child. Newly added element would be first child of the element.
	  </td>
    </tr><tr>
            <td>'beforeend'</td>
            <td>
	            Insert the HTML element inside the specified element, but after its last child. Newly added element would be last child of the element.
	  </td>
    </tr><tr>
            <td>'afterend' </td>
            <td>
	             Insert the HTML element after the specified element.
	  </td>
    </tr>
    </tbody>
</table>

Datatype of **position** parameter is String

**element** parameter value is the element needs to be inserted into DOM tree.