- Objective:
- Breadcrumb: Node - 实例方法
# 概念阐释
## 语义
`.appendChild()`方法将一个节点**附加**到指定父节点的末尾处。
`.removeChild()`方法将一个子节点删除。
## 语法
```js
element.appendChild(aChild)
```
```js
element.removeChild(child);
```
`element`代表了父节点，可以是赋值的父节点变量名，可以是访问父节点，也可以是`<body>` `<head>`标签。
`child`是要删除的子节点，可以是赋值的子节点变量名，可以是访问子节点。
# 实例
将`<p>`附加到`<body>`父节点下
```js
document.body.appendChild(paragraph);
```
移除`body`下的第一个`<p>`段落
```js
//1. 访问要删除的子节点
let removeParagraph = document.querySelector('p');
//2. 删除body下的子节点p
document.body.removeChild(removeParagraph);
```
# 相关内容
[[js DOM 创建HTML标签creatElement]]
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/remove-element)
1. 访问要删除的子节点`id="vespa" `，并存储在变量名中`elementToRemove`
2. 删除在`id="italy-attractions"`下的子节点
# 问题答案
```js
let elementToRemove = document.getElementById('vespa');
document.getElementById('italy-attractions').removeChild(elementToRemove);
```
# 参考资料
- [Node.appendChild-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild)
- [Node.removeChild-MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild)