<body>
<input type="button" value="刪除" id="btn">
<script>
// 在body添加div
// 1 創建元素
var oDiv = document.createElement('div'); oDiv.className = 'box'; // 2 添加到body末尾
document.body.appendChild(oDiv); // document.body.appendChild('text'); 報錯 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
document.body.append(oDiv); document.body.append('text'); // insertBefore() 在任意位置插入元素 第一個參數是需要插入的元素 第二個參數 是參照元素
document.body.insertBefore(oDiv,document.body.children[0]); var btn = document.getElementById('btn'); btn.onclick = function() { // 刪除元素 父親中刪除指定兒子
//document.body.removeChild(oDiv);
oDiv.remove(); } </script>
</body>
這兩個方法都是在父節點的末尾添加子節點
而 insertBefore() 在任意位置插入元素 第一個參數是需要插入的元素 第二個參數 是參照元素
append()和appendChild()的不同點在於：
append()還是一個實驗中的方法，因此使用時可能存在兼容性問題，特別是IE瀏覽器（IE11不支持append方法），append方法也是既可以插入新節點或者文檔中原有的節點，這一點和appendChild方法一樣。append方法與上述的appendChild方法主要存在以下3個區別：
append方法的參數可以是一組Node對象或者String對象，而appendChild方法的參數只能是一個Node對象。
document.body.append('text'); //在父節點的末尾插入了text元素
document.body.appendChild('text'); 報錯 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
append方法沒有返回值
append方法可以同時插入幾個子節點（包括字符串），而appendChild一次只可以插入一個子節點