javaScript DOM插入节点

DOM插入节点

  <p id="JS">JavaScript</p>

    <div id="JAVA">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        //1.已经存在的节点
        var js = document.getElementById('JS');
        var java = document.getElementById('JAVA');
        var ee = document.getElementById('ee');

        //java.appendChild(js);//追加到子元素最后面

        console.log('------------------------------------------------------------------------------------------')
        //2.自己创建一个新的节点
        var newP = document.createElement('p');//创建一个p标签
        newP.id = 'newP';
        newP.innerText = 'hello,world';
        //等价于<p id="newP">hello,world</p>
        //java.appendChild(newP);

        console.log('------------------------------------------------------------------------------------------')
        //3.创建一个标签节点,追加到后面
        var myScript = document.createElement('script');//创建一个script标签
        //通过这个setAttribute(k,v)属性可以设置任意的值
        myScript.setAttribute('id', 'myScript');//(k,v)
        myScript.setAttribute('type', 'text/javascript');//(k,v)
        java.insertBefore(myScript,ee);//insertBefore(引用节点,位置节点)

    </script>