Блог

Главная - Вопросы по программированию - Как я могу создать функцию, которая создает любой html-элемент с любым типом атрибутов?

Как я могу создать функцию, которая создает любой html-элемент с любым типом атрибутов?

#javascript #html #function

Вопрос:

Я хочу создать метод, который принимает тип элемента и любое количество типов атрибутов. Например,

 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;
}

Комментарии:

1. Есть такая вещь. Это называется jQuery 😉

2. Что делать, если я не хочу использовать jQuery? Есть ли простой способ сделать это?

3. вы можете использовать developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute для установки атрибутов вместо назначения одного за другим

4. function createElement(elementType, ...args) { const element = document.createElement(elementType); args.forEach(arg => { for (let prop in arg) { if (typeof prop !== 'undefined') { console.log(prop, arg[prop]) element[prop] = arg[prop]; } } }) return element; } больше похоже на то, что ты хочешь

Ответ №1:

 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>

Удалив список атрибутов, функция теперь принимает любую строку в качестве атрибута.
поскольку «вкл.» может отображаться в других атрибутах, в этом примере я изменил его на более уникальный идентификатор.

Что касается самой функции, то это зависит от вас. Вы можете определить полную функцию или имя функции. Просто не пишите это как текст и не пытайтесь позже преобразовать его в код. Постарайтесь избежать этого, если сможете.

Метки: ,