Question: How can I implement [prepend](http://api.jquery.com/prepend/) and [append](http://api.jquery.com/append/) with regular JavaScript without using jQuery?

Answer: 
If you want to insert a raw HTML string no matter how complex, you can use: 
[`insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML), with appropriate first argument:

> 
> **'beforebegin'**
>  Before the element itself.
>  **'afterbegin'**
>  Just inside the element, before its first child.
>  **'beforeend'**
>  Just inside the element, after its last child.
>  **'afterend'**
>  After the element itself.
> 
> 
> 

Hint: you can always call `Element.outerHTML` to get the HTML string representing the element to be inserted.

An example of usage:

```
document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

```

[DEMO](http://plnkr.co/edit/goh6YqBkl8G6B6M0H8gk?p=preview)

**Caution:** `insertAdjacentHTML` does not preserve listeners that where attached with `.addEventLisntener`.
**In 2017** I know for Edge 15 and IE 12, the prepend method isn't included as a property for Div elements, but if anyone needs a quick reference to polyfill a function I made this:

```
 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

```

Simple arrow function that's compatible with most modern browsers.