时间戳

首页 > 解决方案 > 如何创建一个函数来创建具有任何类型属性的任何 html 元素？

javascript - 如何创建一个函数来创建具有任何类型属性的任何 html 元素？

问题描述

我想创建一个接受元素类型和任意数量的属性类型的方法。例如，

createElement('div', {class: 'test-class', id: 'testId'})

或者

createElement('input', {class: 'test-class', id: 'myInput', type: 'button', onclick: 'console.log('hello world')'})

这是我到目前为止所拥有的，但我只是想知道是否有更好的方法来做到这一点

function create(elementType, ...args) {
  const element = document.createElement(elementType);
  const [elementProps] = args;
  const {
    className,
    id,
    innerText,
    type,
    name,
    value,
    eventType,
    eventAction,
  } = elementProps[0];

  for (let prop in elementProps[0]) {
    if (typeof prop !== 'undefined') {
      element.className = className;
      element.id = id;
      element.innerText = innerText;
      element.type = type;
      element.name = name;
      element.value = value;
      element.addEventListener(eventType, eventAction, false);
    }
  }

  return element;
}

标签： javascripthtmlfunction

解决方案

function cEl(elementType, ...args) {
  const element = document.createElement(elementType);
  const elementProps = args[0];
  for (const [key, value] of Object.entries(elementProps)) {
  if (typeof value != 'undefined') {
    if (key.indexOf('listener') == 0) { // Assume this is an event.
      element.addEventListener(key.substr(8), value, false);
    } else {
      element.setAttribute(key, value);
    }
  }
}
  return element;
}


var el = cEl('input', {
  class: 'test-class', 
  id: 'myInput', 
  type: 'button', 
  listenerclick: function(){console.log("hello world");} // Not a script but an actual function.
});
document.getElementById('d').append(el);
<div id="d"></div>

通过删除属性列表，该函数现在接受任何字符串作为属性。因为“on”可能出现在其他属性中，在这个例子中，我把它改成了一个更独特的标识符。

至于功能本身，就看你自己了。您可以定义完整的函数或函数名称。只是不要将其写为文本并尝试稍后将其转换为代码。如果可以的话，尽量避免这种情况。

推荐阅读