dom操作创建节点/插入节点

<section>
  <div id="box"  style="position: relative;">
    <p id="good">
      <span>第一个元素</span>
      <span id="span">
        <em id="em">我很好</em>
      </span>
    </p>
  </div>
</section>

一,创建节点
// 1,创建元素节点

let div = document.createElement('div');
// 2,创建文本节点

let text = document.createTextNode('你好,世界!');
// 3,创建属性节点

let attr = document.createAttribute('class');

二,插入文本节点/元素节点
// 1,appendChild:el2插入到el1元素的末尾
// el1.appendChild(el2);

// 2,insertBefore:将el插入到parentEl元素内,并且在childrenEl元素的前面(若dom中已存在el,则el将被移动到指定位置)
// parentEl.insertBefore(el, childrenEl);

// 3,innerText:插入文本节点(替换原值);当值为空时,表示清空当前元素内容

// el.innerText = '你好啊,世界!';

// 3,innerHTML:插入节点(替换原值),可解析值内标签;当值为空时,表示清空当前元素内容
// el.innerHTML = '<span>你好啊,世界!</span>>';

// 用法如下:
attr.value = 'test';
div.appendChild(text);
div.setAttributeNode(attr);
document.body.appendChild(div);
document.getElementById('good').insertBefore(document.getElementById('em'), document.getElementById('span'));