node-red mysql的增删改查_五、元素（标签）节点增删改操作

# 1、创建、增加节点

> 方法一：父节点.appendChild(子节点);

```

• 林青霞
• 张曼玉
• 刘欢
• 陈冠希

```

```

//创建一个

谢霆锋

//创建元素类型的节点

var li = document.createElement('li');

//创建文本类型的节点

var text = document.createTextNode('谢霆锋');

//添加节点，将文本节点添加到元素节点中

li.appendChild(text); // 得到

谢霆锋

//添加节点，将组合好的li，添加到ul中

document.querySelector('ul').appendChild(li);

```

> 方法二：父节点.insertBefore(新节点, 参照的节点);

```

/****************** insertBefore *********************/

//创建一个

渣渣辉

var newLi = document.createElement('li');

var newText = document.createTextNode('渣渣辉');

newLi.appendChild(newText); //得到

渣渣辉

//找到参照的张曼玉所在的li

var zhangmanyu = document.getElementsByTagName('li')[1];

//找到li的父节点

var ul = document.querySelector('ul');

//父节点.insertBefore(新节点, 参照的节点);

ul.insertBefore(newLi, zhangmanyu);

```

# 2、克隆节点

> 语法：原来的节点.cloneNode([true]);

```

• 鲁智深
• 张飞
• 猪八戒
• 李逵

```

```

//克隆一份ul，然后放到页面中

//先找到要克隆的ul

var oldUl = document.querySelector('ul');

//克隆一个新的ul

//var newUl = oldUl.cloneNode(); //只克隆ul标签本身，不包含里面的内容

var newUl = oldUl.cloneNode(true); //克隆ul标签并包含里面的内容

//把新的ul放到body中

document.body.appendChild(newUl);

```

# 3、替换节点

> 方法：父节点.replaceChild(新节点, 待替换的节点);

```

• 林黛玉
• 贾宝玉
• 薛宝钗
• 刘姥姥

```

```

// 父节点.replaceChild(新节点, 待替换的节点);

//找父节点

var ul = document.getElementsByTagName('ul')[0];

//新节点

var newLi = document.createElement('li');

var text = document.createTextNode('王熙凤');

newLi.appendChild(text);

//找到待替换的节点

var jiabaoyu = document.getElementsByTagName('li')[1];

//执行替换

ul.replaceChild(newLi, jiabaoyu);

```

# 4、删除节点

> 方法：父节点.removeChild(子节点);

HTML代码：

```

• 林黛玉
• 贾宝玉
• 薛宝钗
• 刘姥姥

```

> JS代码：

```

/********************** 删除节点 *************************/

//父节点.removeChild(子节点);

var ul = document.querySelector('ul');

var xiaoLiu = document.getElementsByTagName('li')[3];

ul.removeChild(xiaoLiu);

```