@helpmeplease196

Можно ли написать функцию создающую DOM элементы?

Хочу автоматизировать создание dom элементов. Пытаюсь написать простую функцию;
let body=document.querySelector("body")

function newElement (nameElement,type, parent){ 
  let nameElement = document.createElement(`${type}`) 
  parent.append(nameElement);
}
  newElement(newDiv,div, body)


1) из-за let в самом начале функции nameElement сразу декларируется и не реагирует на новые аргументы функции при вызове.
2) Так как createElement("") пишется с кавычками, аргумент функции при объявлении тут тоже не работает. В теории это должно решаться через обратные кавычки и `${}`но не работает. Хотя type начинает подсвечиваться как использованный(в vsc)

Во что нужно обернуть nameElement и type ?
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ответы на вопрос 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
// tagName - Имя тега
// props - объект с свойствами DOM элемента
// children - массив с DOM элементами
function createElement (tagName, props = {}, children = []) {
  const newDOMElement = document.createElement(tagName);
  
  if (props) {
    for (const prop in props) {
      if (Object.prototype.hasOwnProperty.call(props, prop)) {
        newDOMElement[prop] = props[prop];
      }
    }
  }
  
  if (children.length) {
    children.forEach(child => {
      newDOMElement.append(child);
    });
  }
  
  return newDOMElement;
}

const body = document.body;

// Создаём новый DOM узел
const newDOM = createElement('div', null, [
  createElement('h1', null, [
    'Заголовок страницы'
  ]),
  createElement('p', null, [
    'Привет, Мир!'
  ]),
  createElement('button', {
    onclick: () => {
      alert('бабах');
    }
  }, [
    'Кликни меня'
  ])
]);

// Вставляем в body новый DOM узел
body.append(newDOM);


Код по сути написал для примера, много особенностей работы с DOM не учтено, но принцип я показал
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы