创建和插入DOM节点

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);
</script>

效果：

创建一个新的标签，实现插入

<script>
    let js = document.getElementById('js'); // 已经存在的节点
    let list = document.getElementById('list');
    // 通过JS 创建一个新的节点
    let newP = document.createElement('p');    // 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello, test';
    // 创建一个标签节点 （通过这个属性，可以设置任意的值）
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript')

    // 可以创建一个style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';  // 设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    // 要包含的节点：insertBefore(newNode, targetNode)
    list.insertBefore(js, ee);