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`.
I added this on my project and it seems to work:

```
HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

```

Example:

```
document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

```