js实现jquerywrap
使用原生 JavaScript 实现 jQuery 的 wrap 方法
jQuery 的 wrap 方法允许用户将匹配的元素包裹在指定的 HTML 结构中。以下是几种原生 JavaScript 的实现方式。
方法一：使用 DOM 操作
function wrap(element, wrapper) {
const parent = element.parentNode;
const wrappedElement = typeof wrapper === 'string'
? document.createElement(wrapper)
: wrapper;
parent.insertBefore(wrappedElement, element);
wrappedElement.appendChild(element);
}调用方式：
const element = document.querySelector('.target');
wrap(element, 'div'); // 包裹在 <div> 中方法二：支持多元素和复杂结构
function wrapAll(elements, wrapper) {
if (elements.length === 0) return;
const firstElement = elements[0];
const parent = firstElement.parentNode;
const wrappedElement = typeof wrapper === 'string'
? document.createElement(wrapper)
: wrapper.cloneNode(true);
parent.insertBefore(wrappedElement, firstElement);
Array.from(elements).forEach(el => {
wrappedElement.appendChild(el);
});
}调用方式：
const elements = document.querySelectorAll('.target');
wrapAll(elements, '<div class="wrapper"></div>');方法三：支持 HTML 字符串作为包裹结构
function wrapWithHTML(element, htmlString) {
const parent = element.parentNode;
const temp = document.createElement('div');
temp.innerHTML = htmlString.trim();
const wrapper = temp.firstChild;
parent.insertBefore(wrapper, element);
wrapper.appendChild(element);
}调用方式：
const element = document.querySelector('.target');
wrapWithHTML(element, '<div class="wrapper"><div class="inner"></div></div>');注意事项
- 这些方法模拟了 jQuery 的基本
wrap功能，但 jQuery 的实现更复杂，支持更多边界情况。 - 对于动态生成的元素，确保 DOM 已加载完成再执行包裹操作。
- 要完全复制 jQuery 的
wrap功能，还需要处理更多特殊情况，如文档片段、函数参数等。
