如何在Document.createElement()方法中传入配置参数？

Great question! The native document.createElement() method's second options parameter is pretty limited—it only supports the is property for custom elements, so it doesn't let you pass full configuration out of the box. But we can use JavaScript's built-in features to achieve single-line configuration that covers setting attributes, adding classes, and more. Here are a few solid approaches:

1. Use Object.assign() for direct element properties #

This works great for setting writable element properties like id, className, textContent, or even event handlers. It’s clean and readable as a single line:

const myDiv = Object.assign(document.createElement('div'), {
  id: 'main-container',
  className: 'bg-light p-4',
  textContent: 'Hello, World!',
  onclick: () => alert('Div clicked!')
});

Note: You can’t directly assign to classList this way (it’s a read-only property), but className lets you set multiple classes as a space-separated string.

2. Immediate Invoked Function Expression (IIFE) with comma operator for full control #

If you need to use methods like classList.add() or setAttribute() (for things like data-* or aria-* attributes), wrap the creation and configuration in an IIFE. You can condense this to a single line using the comma operator to run multiple statements:

const myButton = (btn => (btn.classList.add('btn', 'btn-primary'), btn.setAttribute('aria-label', 'Submit form'), btn.textContent = 'Submit', btn))(document.createElement('button'));

The comma operator executes each statement in order and returns the last value (the configured button element).

3. Single-line with a configuration array #

If you want to pass all your config as an array (like you asked), you can define an array of [property/method, arguments] pairs and process them in the IIFE. Here’s the single-line version:

const mySpan = (el => (config = [['className', 'text-bold'], ['setAttribute', 'data-user-id', '456'], ['textContent', 'Sample Text'], ['addEventListener', 'click', () => console.log('Span clicked!')]], config.forEach(([propOrMethod, ...args]) => typeof el[propOrMethod] === 'function' ? el[propOrMethod](...args) : el[propOrMethod] = args[0]), el))(document.createElement('span'));

This approach keeps all your configuration in one array, making it easy to modify or reuse later. The code checks if each entry is a method (like addEventListener) and calls it with arguments, or sets a property if it’s a plain attribute.

All these methods let you configure your element in a single line without writing a separate utility function, covering your use cases of setting DOM attributes and adding class names.

内容的提问来源于stack exchange，提问作者Laynier Piedra