知識補充：

var box = document.querySelector(‘#box‘);

//"beforebegin" ，在當前元素之前插入一個緊鄰的同輩元素；
    box.insertAdjacentHTML(‘beforebegin‘,‘<div>beforebegin</div>‘);
//"afterend" ，在當前元素之後插入一個緊鄰的同輩元素。
    box.insertAdjacentHTML(‘afterend‘,‘<div>afterend</div>‘);
//"beforeend" ，在當前元素之下插入一個新的子元素或在最後一個子元素之後再插入新的子元素；
    box.insertAdjacentHTML(‘beforeend‘,‘<div>beforeend</div>‘);
//"afterbegin" ，在當前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素；
    box.insertAdjacentHTML(‘afterbegin‘,‘<div>afterbegin</div>‘);
    box.insertAdjacentHTML(‘afterbegin‘,‘<div>afterbegin1</div>‘);

javascript 高級程序設計學習筆記（1）