如何用纯JavaScript创建新div并将现有页面元素包裹在内

核心思路 #

先创建目标父容器，再将需要包裹的现有DOM节点移动到新容器中即可，DOM节点移动时会自动保留原有所有样式、事件绑定，不会改动原有元素的属性。

完整代码示例 #

// 创建带指定类名的新包裹容器
const newWrapper = document.createElement('div')
newWrapper.classList.add('my-new-div')

// 选中需要包裹的两个同级元素，可根据实际场景修改选择规则
// 示例假设两个元素在body下，是body的前两个直接子元素
const parentContainer = document.body
const [firstDiv, secondDiv] = Array.from(parentContainer.children).slice(0, 2)

// 将新容器插入到原有元素的位置，保证页面布局顺序不变
firstDiv.before(newWrapper)

// 移动原有元素到新容器内，appendChild会自动移除原有位置的节点，不会重复
newWrapper.appendChild(firstDiv)
newWrapper.appendChild(secondDiv)

适配不同场景的选择器优化 #

如果需要更精准的选中目标元素，避免误选其他节点，可以根据元素特征修改选择逻辑：

• 若可给原有元素添加标识类：给两个待包裹的div加上class="need-wrap"，选择逻辑改成

  const elementsToWrap = document.querySelectorAll('.need-wrap')
  elementsToWrap.forEach(el => newWrapper.appendChild(el))
  

• 若按元素内容特征选择：比如第一个div包含img标签，第二个包含p标签，可以写

  const firstDiv = document.querySelector('div:has(> img)')
  const secondDiv = document.querySelector('div:has(> p)')
  

注意事项 #

• 不需要手动删除原有位置的元素，appendChild方法移动现有DOM节点时，会自动将节点从原父节点中移除
• 整个过程仅修改DOM层级关系，不会修改原有元素的任何属性、样式、事件绑定，完全符合需求

内容的提问来源于stack exchange，提问作者DGB