js基础（dom增删改）

Posted 2020-11-04 xxxloser

新增节点：

/*
 * 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);