使用原生JS实现wrap与unwrap

jquery中提供了.wrap()与.unwrap()方法
下面介绍一下原生js的实现方法

使用原生JS实现wrap

创建包裹的元素
在被包裹的节点前插入元素
将该节点移入包裹节点

js代码如下

var wrapper = document.createElement('div')
var el = document.querySelector('.wrap-me')
// 在该节点前插入wrapper


el.parentElement.insertBefore(wrapper, inner)
// 将该节点移入wrapper
wrapper.appendChild(el)

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <div class="outer">
        <div class="wrap-me">this is inner text</div>
    </div>
</body>
</html>
<script>
var wrapper = document.createElement('div')
var el = document.querySelector('.wrap-me')
// 在该节点前插入wrapper
el.parentElement.insertBefore(wrapper, inner)
// 将该节点移入wrapper
wrapper.appendChild(el)
</script>

使用原生JS实现unwrap

将所有元素移出该元素
删除该元素

JS代码如下

var wrapper = document.querySelector('.wrapper li')
function unwrap(ele) {
  /* 父元素引用 */
  const parent = ele.parentElement
  /* 如果存在子元素，将其移出 */
  while(ele.firstChild) {
    parent.insertBefore(ele.firstChild, ele)
  }
  /* 删除该元素 */
  parent.removeChild(ele)
}
unwrap(wrapper)

HTML代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=5, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <ul class="wrapper">
        <li class="wrapper">
          <p>I' m inside element</p>
        </li>
      </ul>
      <p>I' m outside element</p>
    </div>
  </body>
</html>


<script>
var wrapper = document.querySelector('.wrapper li')
function unwrap(ele) {
  const parent = ele.parentElement
  while(ele.firstChild) {
    parent.insertBefore(ele.firstChild, ele)
  }
}
unwrap(wrapper)
</script>