iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
自我挑戰組

CSS、JS-30天研究筆記系列 第 21

【Day21】DOM節點操作

  • 分享至 

  • xImage
  •  

包含查找節點,也可以創建節點、複製節點、插入節點、刪除節點和替換節點。

  • createElement() 創建元素節點,用法:
var p = document.createElement('p');
  • appendChild() 將新節點添加到子節點列表的最後面,用法:
xxx.appendChild(p);
  • createTextNode() 創建一個文檔節點,用法:
var text = document.createTextNode('段落'); //创建一个文本节点
  • insertBefore() 將新節點插入到前面,用法:
xxx.parentNode.insertBefore(p, xxx);
  • repalceChild() 將新節點替換舊節點,用法:
xxx.parentNode.replaceChild(p,xxx);
  • cloneNode() 複製節點,用法:
var xxx = document.getElementById('xxx');
  • removeChild() 移除節點,用法:
xxx.parentNode.removeChild(xxx);

註:write() 也可以把字串插入到文檔中,但創建元素同時會刪除先前的元素內容,所以大部分只用於開發測試時使用。


上一篇
【day20】DOM節點屬性
下一篇
【day22】DOM 元素尺寸和位置
系列文
CSS、JS-30天研究筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言