今天就來講解一下該如何把新建的節點放到網頁上吧!

我們先來建立一個新的節點

<div class="ck">
  <div>1</div>
  <div>2</div>
</div>

let oldDiv = document.querySelector('.ck')
let div = document.createElement('div')
div.textContent = 'ck'

appendChild

這個API主要是將結果插入到父節點的最後一個位置

oldDiv.appendChild(div)

呈現效果如下:

append

這個API與appendChild最大的不同在於它的參數可以接受字串以及他能夠一次接收多個參數例如:

let p = document.createElement('p')
p.textContent = "123"
let s = "hello!"
oldDiv.append(s,p)

呈現效果如下:

prepend

跟appendChild剛好相反，是將節點插入到父節點的最前面

oldDiv.prepend(div)

呈現效果如下:

insertBefore

這個API的優勢在於它可以將節點插入到你指定的某個子節點之前，但使用上也相對複雜

父節點.insertBefore(新產生的節點,指定父節點裡的某個子節點)

oldDiv.insertBefore(div,oldDiv.childNodes[3])

呈現效果如下:

確實使用上會更加靈活，不一定是在最前面或最後面，但在JS並沒有insertAfter喔!

insertadjacentelement

這個API跟inserBefore不同於它可以指定四個地方去做插入

<!-- beforebegin --> // 元素之前
<p>
<!-- afterbegin --> // 元素第一個子節點之前
foo
<!-- beforeend --> // 元素最後一個子節點之後
</p>
<!-- afterend --> // 元素之後

那我們就來試看看!

beforebegin

oldDiv.insertAdjacentElement('beforebegin',div)

呈現效果如下:

afterbegin

oldDiv.insertAdjacentElement('afterbegin',div)

呈現效果如下:

beforeend

oldDiv.insertAdjacentElement('beforeend',div)

呈現效果如下:

afterend

oldDiv.insertAdjacentElement('afterend',div)

呈現效果如下:

所以來個總結:

1. append與appendChild都是插入在父節點的最後一個位置，但append可以接受多個參數以及字串
2. prepend會插入在父節點的第一個位置
3. insertBefore同樣是插在節點之前但它可以靈活指定要插入到哪一個子節點之前
4. insertadjacentelement有四個位置任君挑選，不只可以插入到父節點前後，也能夠插入到子節點的前後

這幾個API其實都蠻常用到的，如果要做一些特效或是新增列表等等都會用上，今天就講到這邊謝謝大家!