匹配元素并包装匹配元素之前的其他内容

<div id="container">
    <p>Some text before the target element.</p>
    <span class="target">Target Element</span>
    <p>Some text after the target element.</p>
</div>

// 获取目标元素
const targetElement = document.querySelector('.target');

// 获取目标元素之前的所有兄弟节点
const siblingsBeforeTarget = Array.from(targetElement.parentNode.children).slice(0, targetElement.index);

// 创建一个新的div元素
const wrapperDiv = document.createElement('div');

// 将目标元素之前的所有兄弟节点添加到新的div元素中
siblingsBeforeTarget.forEach(sibling => wrapperDiv.appendChild(sibling));

// 将目标元素添加到新的div元素中
wrapperDiv.appendChild(targetElement);

// 将新的div元素插入到目标元素的父节点中
targetElement.parentNode.insertBefore(wrapperDiv, targetElement.nextSibling);