JSFiddle - React, Tailwind, and code Playground

by iceesong

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding: 10px
    }
    #a{
      background-color: #e91e63;
    }
    #b{
      background-color: #00bcd4;
    }
    #c{
      background-color: #ffc107;
    }
  </style>
</head>
<body>

  <div id="a">div1
    <span id="a1"> span1</span>
  </div>

  <div id="b">div2
    <span id="b1"> span2</span>
  </div>
  <div id="c">
    ccc
  </div>

</body>
<script>
  
  function changeDom(node1, node2) {
    if (node1 == node2) {       
      // 剔除替换为自己的
      return new Error('Can\'t change to yourself!')
    } else if (isInherit(node1, node2) || isInherit(node2, node1)) {
      // 子孙关系不能替换
      return new Error('Can\'t change by inherit Elements!')
    } else {    
      // 深度复制 DOM 节点，在 replace 替换                
      let clone1 = node1.cloneNode(true)
      let clone2 = node2.cloneNode(true)
      
      node1.parentNode.replaceChild(clone2, node1)
      node2.parentNode.replaceChild(clone1, node2)
    }
  }

  // 判断是否为子孙节点
  function isInherit(node1, node2) {
    while(node1.parentNode !== node2) {
      node1 = node1.parentNode
      if(node1.tagName == 'HTML') {
        return false
      }
    }

    return true
  }
</script>
</html>

JavaScript

changeDom(a, b1)