修改内容
修改样式
添加/删除元素
{{ titleText || '点击按钮更新标题' }}
这是一个演示 DOM 操作的卡片区域。
- {{ item }}
- （列表为空）
对应的 JavaScript 代码
// 修改文本内容
const el = document.querySelector('.card-title')
el.textContent = '{{ titleText }}'
// 切换 CSS 类
const card = document.querySelector('.preview-card')
card.className = 'preview-card {{ currentStyle }}'
// 创建并添加新元素
const list = document.querySelector('.card-list')
const li = document.createElement('li')
li.textContent = '新项目 {{ items.length }}'
list.appendChild(li)
// 删除最后一个元素
const list = document.querySelector('.card-list')
const last = list.lastElementChild
if (last) last.remove()
// 点击左侧按钮查看对应代码
常用 DOM 方法
querySelector()
按选择器查找元素
textContent
获取/设置文本内容
classList
操作元素的 CSS 类
createElement()
创建新元素
appendChild()
添加子元素
remove()
删除元素