// 創(chuàng)建元素
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'box active';
div.dataset.id = '123';

// 創(chuàng)建文本節(jié)點（最常用）
const text = document.createTextNode('純文本內(nèi)容');

// 克隆節(jié)點（深度克隆最常用）
const clone = original.cloneNode(true);   // true = 深克?。ò庸?jié)點）
const shallow = original.cloneNode(false); // 只克隆自身

// 方式1：最常用、最直觀（2020年后主流）
parent.append(child);           // 末尾添加（可多個）
parent.prepend(child);          // 開頭添加
parent.before(child);           // 兄弟前插入
parent.after(child);            // 兄弟后插入

// 方式2：經(jīng)典但已被取代
parent.appendChild(child);      // 只支持一個節(jié)點
parent.insertBefore(newNode, referenceNode);

// 方式3：批量插入（性能最好）
const fragment = document.createDocumentFragment();
fragment.append(div1, div2, div3);   // 不會引起多次重排
parent.appendChild(fragment);        // 一次性插入

// 刪除自身（最常用）
element.remove();                    // 現(xiàn)代首選

// 舊方式（仍兼容）
parent.removeChild(element);

// 清空所有子節(jié)點（三種方式對比）
element.innerHTML = '';              // 最快，但有 XSS 風(fēng)險
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
element.replaceChildren();           // 現(xiàn)代最推薦（2020+），干凈、高效

// 推薦寫法（2020+）
button.addEventListener('click', (e) => {
  // e.currentTarget vs e.target
  // e.preventDefault()
  // e.stopPropagation()
}, { once: true, passive: true });   // 優(yōu)化選項

// 事件委托（性能最佳）
document.addEventListener('click', (e) => {
  if (e.target.matches('.delete-btn')) {
    // 處理刪除
  }
});

// 移除事件（必須是同一個函數(shù)引用）
const handler = () => console.log('clicked');
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);