随着前端技术的发展，越来越多的网页应用需要使用 Custom Elements 进行开发。Custom Elements 允许开发者自定义 HTML 元素，通过继承 HTMLElement 或其它自定义元素类来创建自定义元素。在开发 Custom Elements 时，经常需要动态地添加和删除元素。本文将介绍如何在 Custom Elements 中添加和删除元素。
添加元素
在 Custom Elements 中添加元素通常有两种方法。
使用 document.createElement() 方法
使用 document.createElement() 方法可以创建一个新的元素，然后将它添加到 Custom Elements 中。例如，以下代码创建一个自定义列表元素 CustomList，并在 CustomList 中添加两个自定义列表项 CustomListItem。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ----- - -------------------------------------------
----------------- - ----- ---
------------------------
----- ----- - -------------------------------------------
----------------- - ----- ---
------------------------
-
-
----- -------------- ------- ----------- -
------------- -
--------
-
-
------------------------------------ ------------
----------------------------------------- ----------------使用 innerHTML 属性
使用 innerHTML 属性可以将 HTML 字符串插入 Custom Elements 中。例如，以下代码使用 innerHTML 属性在 CustomList 中添加两个自定义列表项 CustomListItem。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - -
---------------------- --------------------
---------------------- --------------------
--
-
-
----- -------------- ------- ----------- -
------------- -
--------
-
-
------------------------------------ ------------
----------------------------------------- ----------------删除元素
在 Custom Elements 中删除元素通常有两种方法。
使用 removeChild() 方法
使用 removeChild() 方法可以从 Custom Elements 中删除一个指定的子元素。例如，以下代码在 CustomList 中删除第一个自定义列表项 CustomListItem。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ----- - -------------------------------------------
----------------- - ----- ---
------------------------
----- ----- - -------------------------------------------
----------------- - ----- ---
------------------------
------------------------ -- -----------
-
-
----- -------------- ------- ----------- -
------------- -
--------
-
-
------------------------------------ ------------
----------------------------------------- ----------------使用 innerHTML 属性
使用 innerHTML 属性可以将指定的 HTML 字符串从 Custom Elements 中删除。例如，以下代码在 CustomList 中删除第一个自定义列表项 CustomListItem。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - -
---------------------- --------------------
---------------------- --------------------
--
-------------- - ---------------------------------------------- ---------------------- ---- -- -----------
-
-
----- -------------- ------- ----------- -
------------- -
--------
-
-
------------------------------------ ------------
----------------------------------------- ----------------总结
在开发 Custom Elements 时，添加和删除元素是常见的需求。本文介绍了两种添加元素的方法（使用 document.createElement() 方法和 innerHTML 属性），以及两种删除元素的方法（使用 removeChild() 方法和 innerHTML 属性）。了解这些方法可以帮助开发者更好地掌握 Custom Elements 的基础知识，进而更好地开发网页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653601a07d4982a6ebdcf7c3