前端生涯

insertBefore()
傳統方法中使用insertBefore()，需要呼叫父層再插入元素

// 建立新元素
var newNode = document.createElement('div');

// 取得node
var referenceNode = document.querySelector('#some-element');

// 在referenceNode前插入newNode
referenceNode.parentNode.insertBefore(newNode, referenceNode);
 

before()
如今，ES6多了一個新方法為before()，與JQuery的before()雷同

// Create a new element
var newNode = document.createElement('div');

// Get the reference node
var referenceNode = document.querySelector('#some-element');

// Insert the new node before the reference node
referenceNode.before(newNode);

before()支援新版本的Chrome、Firefox、Opera，但不支援Edge與Internet Explorer
但有個填充工具可使它支援至IE9以上

(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('before')) {
return;
}
Object.defineProperty(item, 'before', {
configurable: true,
enumerable: true,
writable: true,
value: function before() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();

argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});

this.parentNode.insertBefore(docFrag, this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

REFERENCE: Go Make Things