js实现before
实现 before 方法
在原生 JavaScript 中，没有直接提供类似 jQuery 的 before 方法，但可以通过 DOM 操作实现类似功能。以下是几种实现方式：
使用 insertBefore 方法
insertBefore 是原生 DOM 方法，可以在指定节点前插入新节点。
const parent = document.getElementById('parent');
const referenceNode = document.getElementById('reference');
const newNode = document.createElement('div');
newNode.textContent = 'New Node';
parent.insertBefore(newNode, referenceNode);封装通用 before 函数
可以封装一个通用的 before 函数，模拟 jQuery 的行为。
function before(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode);
}
// 使用示例
const referenceNode = document.getElementById('target');
const newNode = document.createElement('span');
newNode.textContent = 'Inserted before';
before(newNode, referenceNode);使用 insertAdjacentHTML
insertAdjacentHTML 方法可以在指定位置插入 HTML 字符串，支持 beforebegin 位置。
const referenceNode = document.getElementById('target');
referenceNode.insertAdjacentHTML('beforebegin', '<span>Inserted before</span>');扩展 Element 原型
如果需要像 jQuery 一样直接在元素上调用 before 方法，可以扩展 Element 原型。
Element.prototype.before = function(newNode) {
this.parentNode.insertBefore(newNode, this);
};
// 使用示例
const target = document.getElementById('target');
const newNode = document.createElement('div');
newNode.textContent = 'New Node';
target.before(newNode);注意事项
- 确保参考节点有父节点，否则
insertBefore会报错。 - 插入的节点可以是 DOM 元素或文档片段。
- 现代浏览器支持
insertAdjacentHTML，兼容性较好。
以上方法均能实现在指定元素前插入内容的功能，根据具体需求选择合适的方式。
