如何在 Custom Elements 中添加和删除元素？

随着前端技术的发展，越来越多的网页应用需要使用 Custom Elements 进行开发。Custom Elements 允许开发者自定义 HTML 元素，通过继承 HTMLElement 或其它自定义元素类来创建自定义元素。在开发 Custom Elements 时，经常需要动态地添加和删除元素。本文将介绍如何在 Custom Elements 中添加和删除元素。

添加元素

在 Custom Elements 中添加元素通常有两种方法。

使用 document.createElement() 方法

使用 document.createElement() 方法可以创建一个新的元素，然后将它添加到 Custom Elements 中。例如，以下代码创建一个自定义列表元素 CustomList，并在 CustomList 中添加两个自定义列表项 CustomListItem。

// javascriptcn.com 代码示例
class CustomList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const item1 = document.createElement('custom-list-item');
    item1.textContent = 'Item 1';
    this.appendChild(item1);

    const item2 = document.createElement('custom-list-item');
    item2.textContent = 'Item 2';
    this.appendChild(item2);
  }
}

class CustomListItem extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('custom-list', CustomList);
customElements.define('custom-list-item', CustomListItem);

使用 innerHTML 属性

使用 innerHTML 属性可以将 HTML 字符串插入 Custom Elements 中。例如，以下代码使用 innerHTML 属性在 CustomList 中添加两个自定义列表项 CustomListItem。

// javascriptcn.com 代码示例
class CustomList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <custom-list-item>Item 1</custom-list-item>
      <custom-list-item>Item 2</custom-list-item>
    `;
  }
}

class CustomListItem extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('custom-list', CustomList);
customElements.define('custom-list-item', CustomListItem);

删除元素

在 Custom Elements 中删除元素通常有两种方法。

使用 removeChild() 方法

使用 removeChild() 方法可以从 Custom Elements 中删除一个指定的子元素。例如，以下代码在 CustomList 中删除第一个自定义列表项 CustomListItem。

// javascriptcn.com 代码示例
class CustomList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const item1 = document.createElement('custom-list-item');
    item1.textContent = 'Item 1';
    this.appendChild(item1);

    const item2 = document.createElement('custom-list-item');
    item2.textContent = 'Item 2';
    this.appendChild(item2);

    this.removeChild(item1); // 删除第一个自定义列表项
  }
}

class CustomListItem extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('custom-list', CustomList);
customElements.define('custom-list-item', CustomListItem);

使用 innerHTML 属性

使用 innerHTML 属性可以将指定的 HTML 字符串从 Custom Elements 中删除。例如，以下代码在 CustomList 中删除第一个自定义列表项 CustomListItem。

// javascriptcn.com 代码示例
class CustomList extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <custom-list-item>Item 1</custom-list-item>
      <custom-list-item>Item 2</custom-list-item>
    `;

    this.innerHTML = this.innerHTML.replace('<custom-list-item>Item 1</custom-list-item>', ''); // 删除第一个自定义列表项
  }
}

class CustomListItem extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('custom-list', CustomList);
customElements.define('custom-list-item', CustomListItem);

总结

在开发 Custom Elements 时，添加和删除元素是常见的需求。本文介绍了两种添加元素的方法（使用 document.createElement() 方法和 innerHTML 属性），以及两种删除元素的方法（使用 removeChild() 方法和 innerHTML 属性）。了解这些方法可以帮助开发者更好地掌握 Custom Elements 的基础知识，进而更好地开发网页应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653601a07d4982a6ebdcf7c3