用 jQuery 吧

$('#id').before('<p>插入到元素前面</p>');
$('#id').after('<p>插入到元素后面</p>');

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)

HTMLElement.prototype.appendHTML = function(html) {
    var _p = document.createElement("p"),
        _dom = null,
        _fragment = document.createDocumentFragment();
    _p.innerHTML = html;
    _dom = _p.childNodes;
    for(var i = 0 ; i < _dom.length ; i++) {
        _fragment.appendChild(_dom[i].cloneNode(true));
    }
    this.appendChild(_fragment);
    _dom = null;
    _fragment = null;
};

这是我自己搞的一个插入的方法，你可以试试。

原生的insertAdjacentHTML

https://developer.mozilla.org...