js实现jquerywrap
使用原生 JavaScript 实现 jQuery 的 wrap 功能
jQuery 的 wrap 方法用于将匹配的元素包裹在指定的 HTML 结构中。以下是几种原生 JavaScript 实现方式：
方法一：使用 DOM 操作实现基本 wrap 功能
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 div = document.querySelector('.target');
wrap(div, 'div'); // 用<div>包裹目标元素方法二：支持多元素和复杂 HTML 结构的 wrap
function wrapAll(elements, wrapper) {
if (!elements.length) return;
const firstElement = elements[0];
const parent = firstElement.parentNode;
const wrapperNode = typeof wrapper === 'string'
? document.createElement(wrapper)
: document.createElement('div').innerHTML = wrapper;
parent.insertBefore(wrapperNode, firstElement);
Array.from(elements).forEach(el => {
wrapperNode.appendChild(el);
});
}
// 使用示例
const items = document.querySelectorAll('.item');
wrapAll(items, '<div class="container"></div>');方法三：完整模拟 jQuery wrap 方法
function jQueryWrap(selector, wrapper) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
const wrapperNode = typeof wrapper === 'string'
? document.createElement(wrapper)
: document.createElement('div').innerHTML = wrapper;
element.parentNode.insertBefore(wrapperNode, element);
wrapperNode.appendChild(element);
});
}
// 使用示例
jQueryWrap('.box', 'section'); // 用<section>包裹所有.box元素注意事项
- 当使用 HTML 字符串作为 wrapper 时，需要先创建临时元素解析字符串
- 处理多个元素时要注意保持 DOM 操作的顺序
- 对于复杂的嵌套结构，可能需要递归处理
这些方法提供了从简单到复杂的实现方案，可以根据具体需求选择合适的实现方式。原生 JavaScript 实现避免了 jQuery 依赖，同时保持了相似的功能性。
