DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。

1. 创建新节点

createDocumentFragment() // 创建一个 DOM 片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入

appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子节点前插入一个新的子节点

3. 查找

getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，
其中包括 id 等于 name 值的)
getElementById() // 通过元素 Id，唯一性

参考如下：

        let bigBox = document.getElementById('self_chart');

        Array.isArray(_data) && _data.map((item, index) => {

          selfDataId.push(_data[index].id)
          setselfDataId([...selfDataId])

          var littleBox = document.createElement('div')
          littleBox.style.width = "415px";
          littleBox.style.height = "250px";
          littleBox.setAttribute("id", 'selfCharts' + index)
          littleBox.setAttribute("class", 'selfChartsBox')
          bigBox.appendChild(littleBox) //插入元素到容器末尾



        })