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

Question

[helpmeplease196]

Хочу автоматизировать создание 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 ?

Comments

[Rsa97]

newElement(newDiv,div, body)
Что в этой строке находится в переменных newDiv, div и body?

[helpmeplease196]

Rsa97, newElement(newDiv,div, body)
newDiv - название нового элемента (nameElement)
div - сам новый элемент (type)
body - куда элемент вставляется (parent)

[Rsa97]

helpmeplease196, Нет, какие значения этих переменных в момент вызова функции? Где они задаются?

[helpmeplease196]

Rsa97, в параметрах функции при объявлении перечислены nameElement,type, parent. Далее в теле функции указывается, что происходит с каждым аргументом.
nameElement = document.createElement
type указывется в createElement
parent в append (и это единственная часть которая работает)
Далее при вызове функции указываем нужные аргументы newDiv, div, body

Разве функции работают не так ?

[Rsa97]

helpmeplease196, Вы при вызове функции указываете три переменные - newDiv, div и body. А где вы задаёте значения этим переменным?
newDiv - переменная. 'newDiv' - строка.

[helpmeplease196]

Rsa97, спасибо я тормоз - пробовала вариант с "div", но видимо другие ошибки "перекрывали" ее.

Можно ли что-то сделать с let в строке let nameElement, что бы nameElement не декларировалсь ?

[Adamos]

helpmeplease196, вам стоит сначала доучить синтаксис JS на элементарных примерах, чтобы не писать на нем такой дичи. а уже потом браться за реализацию задуманного. То, что вам сейчас разжуют ляпы именно этого конкретного кода, от каши в голове все равно не поможет.

Answer 1

[Дима Паутов]

// 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 не учтено, но принцип я показал