介绍
dynamically-html 是一款基于原生 JavaScript 的 npm 包，可以用于动态创建、修改和删除 HTML 元素。
它的主要功能包括：
- 动态创建 HTML 元素
- 修改 HTML 元素的属性和类名
- 添加/删除 HTML 元素的子元素
使用 dynamically-html 可以有效地提高前端开发效率，特别是对于需要频繁动态更新页面的项目而言。
安装
在使用之前，需要先通过 npm 安装 dynamically-html。可以执行以下命令：
npm install dynamically-html
示例
以下是一个简单的使用示例，用于创建一个包含两个按钮的 div 元素：
-- -------------------- ---- ------- ------ - -------------- ------------------ ------------- -------- - ---- ------------------- -- ---- --- -- ----- --- - --------------------- -- ---- ------ ----------- ----- ------- - --------------------------- ------- ---- ----- ------- - --------------------------- ------- ---- -- -- ------- --- --------------------- -------- ---- -------------- -- - ------- - ------- --- --- --- ------------- --------- ------------- ---------
在上面的示例中，使用 createElement 函数来创建 div 元素，同时使用 createTextElement 函数来创建包含文本内容的 button 元素。然后通过 setAttribute 函数为 button1 添加类名，最后使用 addChild 函数将 button1 和 button2 添加到 div 元素中。
API
dynamically-html 提供了以下 API：
createElement(tagName: string): HTMLElement
创建一个指定 tagName 的 HTML 元素并返回。
createTextElement(tagName: string, text: string): HTMLElement
创建包含指定文本的 HTML 元素并返回。text 参数为字符串类型，表示元素的文本内容。与 createElement 不同，createTextElement 会将文本内容插入元素中。
setAttribute(element: HTMLElement, attributeName: string, attributeValue: string): void
设置指定 HTML 元素的指定属性。element 参数表示要设置属性的元素，attributeName 和 attributeValue 分别表示属性的名称和值。
removeAttribute(element: HTMLElement, attributeName: string): void
删除指定 HTML 元素的指定属性。element 参数表示要删除属性的元素，attributeName 表示要删除的属性名称。
addClass(element: HTMLElement, className: string): void
为指定 HTML 元素添加一个类名。element 参数表示要添加类名的元素，className 表示要添加的类名。
removeClass(element: HTMLElement, className: string): void
从指定 HTML 元素中删除一个类名。element 参数表示要删除类名的元素，className 表示要删除的类名。
addChild(parentElement: HTMLElement, childElement: HTMLElement): void
向指定 HTML 元素添加一个子元素。parentElement 参数表示要添加子元素的父元素，childElement 表示要添加的子元素。
removeChild(parentElement: HTMLElement, childElement: HTMLElement): void
从指定 HTML 元素中删除一个子元素。parentElement 参数表示要删除子元素的父元素，childElement 表示要删除的子元素。
总结
dynamically-html 是一款方便的 npm 包，可以帮助开发人员更轻松地动态创建、修改和删除 HTML 元素，从而提高工作效率。
在实际项目中可以根据需要结合具体的业务场景和需求，灵活使用 dynamically-html 提供的各种 API，以实现更为复杂和实用的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005582a81e8991b448d5577