当前位置：首页 > JavaScript

js实现wrap

2026-02-02 03:19:32JavaScript

实现 wrap 功能的 JavaScript 方法

在 JavaScript 中，实现 wrap 功能通常指将某个元素或内容包裹在另一个指定的元素中。以下是几种常见的实现方式：

使用原生 DOM 方法

原生 DOM 提供了 wrap 相关的方法，但需要手动实现：

js实现wrap

function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// 使用示例
const target = document.querySelector('.target');
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
wrap(target, wrapper);

使用 jQuery 的 wrap 方法

如果项目中使用了 jQuery，可以直接使用其内置的 wrap 方法：

$('.target').wrap('<div class="wrapper"></div>');

使用现代 JavaScript 的 Element.wrap

现代浏览器支持 Element.prototype.wrap 方法：

js实现wrap

const target = document.querySelector('.target');
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
target.wrap(wrapper);

使用 DocumentFragment

对于需要高性能的场景，可以使用 DocumentFragment：

function wrapWithFragment(el, wrapper) {
    const fragment = document.createDocumentFragment();
    fragment.appendChild(wrapper);
    wrapper.appendChild(el);
    el.parentNode.insertBefore(fragment, el);
}

动态创建包裹元素

如果需要动态创建包裹元素并设置属性：

function wrapWithAttributes(el, tagName, attributes) {
    const wrapper = document.createElement(tagName);
    Object.keys(attributes).forEach(key => {
        wrapper.setAttribute(key, attributes[key]);
    });
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

// 使用示例
wrapWithAttributes(document.querySelector('.target'), 'div', {
    class: 'wrapper',
    id: 'custom-wrapper'
});