当前位置：首页 > JavaScript

js实现jquerywrap

2026-01-31 23:56:57JavaScript

使用原生JavaScript实现jQuery的wrap功能

jQuery的wrap()方法允许开发者用指定的HTML结构包裹匹配的元素。以下是几种原生JavaScript实现方式：

js实现jquerywrap

方法一：使用parentNode和insertBefore

function wrap(element, wrapper) {
    const parent = element.parentNode;
    const nextSibling = element.nextSibling;
    parent.insertBefore(wrapper, element);
    wrapper.appendChild(element);
}

方法二：处理多个元素的情况

function wrapAll(elements, wrapper) {
    if (elements.length === 0) return;

    const firstElement = elements[0];
    const parent = firstElement.parentNode;

    parent.insertBefore(wrapper, firstElement);

    Array.from(elements).forEach(el => {
        wrapper.appendChild(el);
    });
}

方法三：支持字符串形式的wrapper参数

function wrapWithSelector(element, wrapper) {
    const temp = document.createElement('div');
    temp.innerHTML = wrapper;
    const realWrapper = temp.firstElementChild;

    element.parentNode.insertBefore(realWrapper, element);
    realWrapper.appendChild(element);

    return realWrapper;
}

方法四：完整实现（支持单元素和集合）

function wrap(elements, wrapper) {
    if (typeof wrapper === 'string') {
        const temp = document.createElement('div');
        temp.innerHTML = wrapper;
        wrapper = temp.firstElementChild;
    }

    if (elements.length) {
        Array.from(elements).forEach(el => {
            el.parentNode.insertBefore(wrapper.cloneNode(true), el)
                .appendChild(el);
        });
    } else {
        elements.parentNode.insertBefore(wrapper, elements);
        wrapper.appendChild(elements);
    }
}

使用示例

// 包裹单个元素
const div = document.querySelector('.target');
wrap(div, '<div class="wrapper"></div>');

// 包裹多个元素
const spans = document.querySelectorAll('span');
wrapAll(spans, document.createElement('div'));