Day18 語法改革！零基礎新手也能讀懂的JS - 如何使用 JS 新增節點? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 18

自我挑戰組

語法改革！零基礎新手也能讀懂的JS！系列第 18 篇

Day18 語法改革！零基礎新手也能讀懂的JS - 如何使用 JS 新增節點?

12th鐵人賽

CK_Yang

2020-10-03 22:32:01

646 瀏覽

分享至

我們過去都是只有更改節點的內容或是節點的結構，今天我們來講解如何在 JS 裡也能夠自己產生節點!

createElement

這個API最主要的用途就是自己建立一個節點，並且在JS就先將此節點都組裝好，最後直接放到指定的HTML位置中。

大概像是這樣使用

let div = document.createElement('div')

這時你就有了一個新的div標籤，但其實目前你在網頁上還找不到他，必須使用其他API才能將其置入，我們接下來在新增幾個節點吧!

let a = document.createElement('a')
let p = document.createElement('p')

createTextNode

這個API主要是新增文字節點，而不是一般的節點，他單純就是文字所以如果你想在p裡面放入文字其實可以使用這個，或是使用textContent都可以

let ck = document.createTextNode('ck')
p.appendChild(ck) //現在如果以HTML來看會是 <p>ck</p>

// 使用textContent
p.textContent = 'ck' //也可以

組裝Time

最後我們將上述的零件全都組裝起來吧!

<body>
  <div class="ck"></div>
</body>

let div = document.createElement('div')
let a = document.createElement('a')
let p = document.createElement('p')
let ck = document.createTextNode('ck')
p.appendChild(ck) //塞入文字
a.href = 'http://ck.com' // 賦予網址
a.appendChild(p) // 把p塞入a裡
div.appendChild(a) // 把a放入div裡
let oldDiv = document.querySelector('.ck')
oldDiv.appendChild(div) // 最後將整包div放入指定地方

那你在畫面上應該就會看到一個網址連結名為ck

並且你如果看結構的話，也會發現確實都按照我們放入的順序整齊的排好!

所以如果想要製作一個按鈕點下去就能夠一直創建新的節點也不難!

<body>
 <div class="ck"></div>
  <button class="click">click me!</button>
</body>

let oldDiv = document.querySelector('.ck')
let btn = document.querySelector('.click')

btn.addEventListener('click',function(){ 
  let div = document.createElement('div')
  let a = document.createElement('a')
  let p = document.createElement('p')
  let ck = document.createTextNode('ck')
  p.appendChild(ck)
  a.href = 'http://ck.com'
  a.appendChild(p)
  div.appendChild(a)
  oldDiv.appendChild(div)
  
})