新增節點：

/*
 * document.createElement()
 *        可以用於創建一個元素節點對象，
 *        它需要一個標簽名作為參數，將會根據該標簽名創建元素節點對象，
 *        並將創建好的對象作為返回值返回
 */
var li = document.createElement("li");
/*
 * document.createTextNode()
 *        可以用來創建一個文本節點對象
 *  需要一個文本內容作為參數，將會根據該內容創建文本節點，並將新的節點返回
 */
var gzText = document.createTextNode("廣州");
 
/*
 * appendChild()
 *         - 向一個父節點中添加一個新的子節點
 *         - 用法：父節點.appendChild(子節點);
 */
li.appendChild(gzText);

/*
* insertBefore()
*     - 可以在指定的子節點前插入新的子節點
*  - 語法：
*         父節點.insertBefore(新節點,舊節點);
*/
city.insertBefore(li , bj);

/*
 * replaceChild()
 *     - 可以使用指定的子節點替換已有的子節點
 *     - 語法：父節點.replaceChild(新節點,舊節點);
 
 
*/
city.replaceChild(li , bj);

/*
* removeChild()
*     - 可以刪除一個子節點
*     - 語法：父節點.removeChild(子節點);
*         
*         子節點.parentNode.removeChild(子節點);
*/
//city.removeChild(bj);

bj.parentNode.removeChild(bj);

//向city中添加廣州
var city = document.getElementById("city");

/*
* 使用innerHTML也可以完成DOM的增刪改的相關操作
* 一般我們會兩種方式結合使用
 
*/
//city.innerHTML += "<li>廣州</li>";

//創建一個li
var li = document.createElement("li");
//向li中設置文本
li.innerHTML = "廣州";
//將li添加到city中
city.appendChild(li);Child(li);

js基礎（dom增刪改）