JSFiddle - React, Tailwind, and code Playground

by Jack Violet

HTML

<div>
  <div id="container">
    <h2 id="child">Hello Child</h2>
  </div>
  <br/>
  <div id="buttonGroup"></div>
</div>

JavaScript

// 父节点向子节点插入元素
function appendChild() {
  var container = document.getElementById("container")
  var text = document.createElement("h2")
  text.textContent = 'Hello New Child'
  container.appendChild(text)
}
// 子节点获取父节点，在父节点后插入元素
function appendParent() {
  var child = document.getElementById('child')
  var parent = child.parentElement
  var text = document.createElement("h1")
  text.textContent = 'Hello Parent'
  var root = parent.parentElement

  root.insertBefore(text, parent.nextSibling)
}
// 在当前元素前插入元素
function appendPre() {
  var child = document.getElementById('child')
  var text = document.createElement("h2")
  text.textContent = 'Hello Pre Child'
  child.parentElement.insertBefore(text, child)
}
// 在当前元素后插入元素
function appendNext() {
  var child = document.getElementById('child')
  var text = document.createElement("h2")
  text.textContent = 'Hello Next Child'
  child.parentElement.insertBefore(text, child.nextSibling)
}
// 移除父元素中最后一个子元素
function removeEle() {
  var container = document.getElementById('container')
  if (container.lastChild) {
    container.removeChild(container.lastChild)
  }
}
// 替换父元素中的子元素
function replaceEle() {
  var child = document.getElementById("child")
  var newNode = document.createElement('div')
  newNode.innerHTML = "<button>button</button>hello new node replaced"
  var parent = child.parentElement
  parent.replaceChild(newNode, child)
}
// 创建按钮组
var ButtonGroup = document.getElementById("buttonGroup")
var EventList = [
  "appendChild",
  "appendParent",
  "appendPre",
  "appendNext",
  "removeEle",
  "replaceEle"
]

var ButtonArr = []
for (var key of EventList) {
  var btn = document.createElement('button')
  btn.textContent = key
  btn.onclick = eval(key)
  ButtonArr.push(btn)
}
for (var b of ButtonArr) {
  ButtonGroup.appendChild(b)
}