createelement创建的元素默认无任何属性，必须手动设置class、data-、aria-等属性及事件监听器，否则节点无法交互、无样式钩子且无障碍失效。
createElement 创建的元素默认不带任何属性
直接调用 document.createElement('div') 得到的是一个干净、空壳的节点，class、data- 属性、aria- 属性、事件监听器、样式内联等全都不会自动存在。必须手动补全——不是“可选”，而是“必做”。否则你拿到的只是一个无法参与交互、无样式钩子、无障碍失效的“幽灵节点”。
setAttribute 是最通用但需注意命名规则的写法
对任意 HTML 属性（包括自定义 data-、aria-），setAttribute 都能用，但要注意大小写和连字符处理：
-
tabindex写成setAttribute('tabindex', '0')，不能写成tabIndex -
data-user-id必须原样传字符串setAttribute('data-user-id', '123')，不能驼峰化 -
aria-label同理，setAttribute('aria-label', '关闭')，不是ariaLabel - 布尔属性如
disabled，设为''或''（空字符串）即生效，setAttribute('disabled', '')
示例：
const btn = document.createElement('button');
btn.setAttribute('type', 'button');
btn.setAttribute('data-id', 'submit-1');
btn.setAttribute('aria-label', '提交表单');
btn.setAttribute('disabled', '');
className 和 style 要单独赋值，别混进 setAttribute
class 和 style 是 DOM 元素的专有属性（property），不是 HTML 特性（attribute）。虽然 setAttribute('class', '...') 也能“看起来生效”，但会覆盖已有的 class（比如通过 classList 添加的），且无法触发 className 的 setter 逻辑；同理，style 必须走 element.style.xxx = '...' 才能真正解析 CSS 值。
- 设 class：用
el.className = 'btn btn-primary'或更安全的el.classList.add('btn', 'primary') - 设内联样式：逐个赋值，如
el.style.color = '#333'、el.style.marginTop = '8px'；批量设请用Object.assign(el.style, { color: '#333', marginTop: '8px' }) - 避免
setAttribute('style', 'color:red; margin-top:8px')—— 容易被 XSS 过滤，也难维护
事件监听器不能靠 onclick 属性绑定，得用 addEventListener
即使你用 setAttribute('onclick', 'handleClick()')，它也只在全局作用域查找 handleClick，且每次重新 set 都会覆盖旧 handler，还容易引入 eval 风险。动态创建的节点，事件必须用 addEventListener 显式挂载：
const input = document.createElement('input');
input.type = 'text';
input.addEventListener('input', function(e) {
console.log('当前值：', e.target.value);
});
// 不要这样：
// input.setAttribute('oninput', 'console.log(value)');
特别注意：如果节点后续要插入到文档中再移除，记得在移除前调用 removeEventListener（或使用 { once: true } 选项），否则可能造成内存泄漏。
复杂属性组合本身不难，难的是记住哪些是 attribute、哪些是 property、哪些是 runtime-only 行为。漏掉一个 aria- 属性，可能让屏幕阅读器跳过整个控件；忘了 removeEventListener，滚动列表几百次后内存就悄悄涨上去了。
