element as the last child element of the main heading
mainHeading.appendChild(newSpan);
```
{% hint style="warning" %}
**.appendChild()** Needs An Element!
{% endhint %}
This is stated above, but I wanted to call this out, specifically. When you're using the `.appendChild()` method, it must be called on an existing element. To be clear, you can't call this on the `document` object, so the following will result in an error:
```javascript
const newSpan = document.createElement('span');
// causes an error
document.appendChild(newSpan);
```
### 2. Creating Text Nodes
第二種方式則是產生內文後，再添加到element，多一個步驟：
* creates a paragraph element
* creates a text node
* appends the text node to the paragraph
* appends the paragraph to the tag
```javascript
const myPara = document.createElement('p');
const textOfParagraph = document.createTextNode('I am the text for the paragraph!');
myPara.appendChild(textOfParagraph);
document.body.appendChild(myPara);
```
用以下的方式產生一樣的結果：
```javascript
const myPara = document.createElement('p');
myPara.textContent = 'I am the text for the paragraph!';
document.body.appendChild(myPara);
```
{% hint style="warning" %}
如果將同一個element多次appendChild給不同element，則只會append到最後一個指定的element。
{% endhint %}
### 3. Inserting HTML In Other Locations
問題：appendChild只能插入parent的child的最後一個位置。
解法：.insertAdjacentHTML()
Enter the `.insertAdjacentHTML()` method! The `.insertAdjacentHTML()` method has to be called with two arguments:
* the location of the HTML
* the HTML text that is going to be inserted
The first argument to this method will let us insert the new HTML in one of four different locations
* `beforebegin` – inserts the HTML text as a previous sibling
* `afterbegin` – inserts the HTML text as the first child
* `beforeend` – inserts the HTML text as the last child
* `afterend` – inserts the HTML text as a following sibling
```markup
Existing text/HTML content
```
Here's how we'd call `.insertAdjacentHTML()`:
```javascript
const mainHeading = document.querySelector('#main-heading');
const htmlTextToAdd = 'Skydiving is fun!
';
mainHeading.insertAdjacentHTML('afterend', htmlTextToAdd);
```
Check out the documentation page for more information: [insertAdjacentHTML docs](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
## Remove Page Content
### 1. Removing a Child Element
相對appendChild，也有removeChild
```javascript
.removeChild();
```
Here's the `.removeChild()` documentation page on MDN: [removeChild docs](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)
可以看出來first child其實有奇怪的內容
到element點選右鍵可以用Edit as HTML去看其底下真正的HTML。
### 2. Removing a Child Element (Part 2!)
#### A drawback (and workaround!) with the `.removeChild()` Method
Just like the `.appendChild()` method, there's a (somewhat minor) drawback to the `.removeChild()` method. Both methods:
* require access to parent to function
可以利用parentElement方法來做到這件事：
```javascript
const mainHeading = document.querySelector('h1');
mainHeading.parentElement.removeChild(mainHeading);
```
不需要parent的remove方式：
```javascript
const mainHeading = document.querySelector('h1');
mainHeading.remove();
```
### Remove Page Content Recap
In this short section, we learned two ways to remove an element from the page. You learned about:
* `.removeChild()`
* `.remove()`
The difference is that with `.removeChild()` must be called on the parent of the element being removed and must be passed the child to be removed, while `.remove()` can be called directly on the element to delete.
We also learned about the following helpful properties:
* `.firstChild`
* `.firstElementChild`
* `.parentElement`
The difference between `.firstChild` and `.firstElementChild`, is that `.firstElementChild` will always return the first element, while `.firstChild` *might* return whitespace (if there is any) to preserve the formatting of the underlying HTML source code.
## Style Page Content
### CSS Specificity
廣度概念：
**Rules in a stylesheet** > **Rules in a \