编辑“︁HTML动态创建元素”︁（章节）

== 进阶主题 ==

=== 自定义元素 ===

结合Web Components创建可复用的自定义元素：

<syntaxhighlight lang="javascript">
class DynamicList extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        ul { list-style: none; padding: 0; }
        li { padding: 8px; border-bottom: 1px solid #eee; }
      </style>
      <ul id="items-container"></ul>
    `;
  }
  
  addItem(text) {
    const li = document.createElement('li');
    li.textContent = text;
    this.shadowRoot.getElementById('items-container').appendChild(li);
  }
}

customElements.define('dynamic-list', DynamicList);

// 使用
const list = document.createElement('dynamic-list');
document.body.appendChild(list);
list.addItem('第一项');
list.addItem('第二项');
</syntaxhighlight>

=== 响应式框架中的使用 ===

在Vue/React等框架中，动态元素创建通常通过声明式方式处理：

```jsx
// React示例
function DynamicList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}
```