Как использовать функцию JavaScript на динамически созданном элементе?

Question

Я создал li, используя

  static make(string, el) {
    var wrapper= document.createElement((el || 'div'));
    wrapper.innerHTML = string;
    return wrapper.firstChild;
  }

  static makeLi(string) {
    return this.make(string, "ul");
  }

Это шаблон для строки, которую я передаю:

return `
  <li class="truer-companion">
    <a class="truer-companion-link" href="${url}">${this.escapeHTML(title)}</a>
    ${Vote.form_container(article_id)}
  </li>
`;

Где он передается функции с этим

  static createVoteForms(el) {
    console.log(el);
    let foo = (el || document).getElementsByClassName("bar");

Что выдает ошибку

Error in event handler for (unknown): TypeError: (el || document).getElementsByClassName is not a function

Но где-то еще, где я не запускаю createVoteForms с аргументом, он работает нормально.

И когда я регистрирую el, вывод равен #text, но имеет атрибуты, подобные объекту.

Answer 1

И когда я регистрирую el, вывод #text, но имеет атрибуты, подобные объекту.

DOM имеет множество различных типов узлов.

Когда вывызов createElement, вы создаете элементный узел .

Значение, которое вы передаете createVoteForms, является текстовым узлом .Вот как текст представлен в DOM.(Это не принесло бы пользы, если бы вы могли иметь <p>, но у вас не было бы возможности поместить в него текст!).

Текстовые узлы не имеют метода getElementsByClassName (поскольку текстовые узлы не могут содержатьдругие узлы).