我們首先定義幾個節點

<p id = "javascript">javascript</p>
<div id = "list">
    <p id = "se">javaSE</p>
    <p id = "ee">javaEE</p>
    <p id = "me">javaME</p>
</div>

然後來操作節點，可以實現追加

//追加節點
var list = document.getElementById('list');
var js = document.getElementById('javascript');
list.append(js);//追加一個元素
var newP = document.createElement('p');//建立一個p節點
newP.id = 'newP';//賦id
newP.innerText = 'hello,world';//內容
list.append(newP);//追加

//建立一個標籤節點
var mScript = document.createElement('script');
script.setAttribute('type','text/javascript');

var mStyle = document.createElement('style');
mStyle.setAttribute('type','text/css');
mStyle.innerHTML = 'body{background-color : yellow}';//設定標籤內容
document.getElementsByTagName('head')[0].appendChild(mStyle);//放到head裡面生效
 

下面可以實現在某個節點前新增節點

// 在前面插入節點
var list = document.getElementById('list');
var ee = document.getElementById('ee');
var js = document.getElementById('javascript');
// insertBefore(newNode,targetNode)
list.insertBefore(js,ee);