在前端开发中，经常需要动态生成 DOM 元素，create-elem 是一个轻量的 npm 包，可以帮助我们快速又简单地完成这个任务。在这篇文章中，我们将会学到如何使用 create-elem 这个 npm 包。
安装
使用 npm 进行安装：
npm install create-elem
使用
在你的项目中引入 create-elem：
import createElem from 'create-elem';
使用 createElem() 生成一个元素：
const el = createElem('div');
console.log(el); // <div></div>你也可以指定元素 class 和它的内容：
const el = createElem('p', { class: 'highlight' }, 'Hello world');
console.log(el); // <p class="highlight">Hello world</p>你还可以将 el 添加到页面：
const container = document.querySelector('#container');
container.appendChild(el);嵌套元素
createElem() 还可以添加 DOM 元素到父元素中：
const el = createElem('div', [
createElem('h1', 'Hello world'),
createElem('p', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.')
]);
console.log(el.outerHTML);输出：
<div> <h1>Hello world</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
元素属性
createElem() 还可以添加元素属性：
const el = createElem('input', { type: 'text', placeholder: 'Enter your name' });
console.log(el.outerHTML);输出：
<input type="text" placeholder="Enter your name">
示例代码
-- -------------------- ---- ------- ------ ---------- ---- -------------- ----- --------- - ------------------------------------- ----- ---- - ------------------- ----- --------- - ------------------- - ---- ------------ -- -------- ----- --------- - ------------------- - ----- ------- --- ------------ --- ---------------------- ----------- ----- ---------- - ------------------- - ---- ------------- -- --------- ----- ---------- - ------------------- - ----- -------- --- ------------- --- ----------------------- ------------ ----- --------- - -------------------- - ----- -------- -- ---------- ----- ----- - ---------------- -------- ----- ----------------------- ----- -----------
这段代码将会生成一个表单，包含两个输入框和一个提交按钮，并添加到 #container 元素中。
总结
在这篇文章中，我们学习了如何使用 create-elem 这个 npm 包生成 DOM 元素，以及如何使用 createElem() 中的参数和属性添加元素内容和样式。希望通过这篇文章，你已经学会了如何使用 create-elem，可以在自己的项目中使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067381890c4f7277584202