iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
自我挑戰組

語法改革!零基礎新手也能讀懂的JS!系列 第 19

Day19 語法改革!零基礎新手也能讀懂的JS - 節點插入

  • 分享至 

  • xImage
  •  

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

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

<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其實都蠻常用到的,如果要做一些特效或是新增列表等等都會用上,今天就講到這邊謝謝大家!


上一篇
Day18 語法改革!零基礎新手也能讀懂的JS - 如何使用 JS 新增節點?
下一篇
Day20 語法改革!零基礎新手也能讀懂的JS - 節點樣式修改
系列文
語法改革!零基礎新手也能讀懂的JS!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言