Почему функция JavaScript не создает элемент HTML?

Question

У меня есть метод, который предназначен для создания div внутри другого div ... Однако он не будет работать ...

Вот метод:

populateSquares(){
    let relatedTagToPopulation = document.getElementById("questionp");
    let whatTextIs = relatedTagToPopulation.textContent;
    for (let u=0;u<this.stemQuestions.length;u++){
        if (this.stemQuestions[u]==whatTextIs){
            var populateSquaresPertinentInt = u;
        }
    }
    for  (let i=0;i<this.stemAnswers.length;i++){
        if (i==populateSquaresPertinentInt){
            let numberOfSquaresToAdd = this.stemAnswers[i].length;
            for (let j=0;j<numberOfSquaresToAdd;j++){
                let elToAdd = document.createElement("<div id='ans"+j+"' class='lans'></div>"); 
                let elToAddInto = document.getElementById("answeri"); 
                elToAddInto.appendChild(elToAdd); 
            }
        }
    }
}

Itвыдает эту ошибку ...

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<div id='ans0' class='lans'></div>') is not a valid name.

Answer 1

Три способа создания тегов

Все следующие примеры делают одно и то же: ^✱
Создайте тег <article> с классом: .post и добавьте его в тег <main id="main">.
^{✱ Существует исключение, см. # 2 .innerHTML}

---

document.createElement(tagName)

Единственным параметром является tagName (например, "DIV", "SPAN", "IFRAME" и т. Д.).После создания его необходимо добавить в DOM:

const post = document.createElement("ARTICLE");
post.className = "post";
document.getElementById('main').appendChild(post);

Это старый, но стабильный метод, но для создания одного тега barebones требуется две строки.Для назначения атрибутов и содержимого необходим дополнительный код.

---

.innerHTML += htmlString

Это свойство будет анализировать тег (ы) из заданногоСтрока в целевом теге.Если используется оператор =, то все содержимое целевого тега перезаписывается на htmlString.Если используется оператор +=, к содержимому внутри целевого тега будет добавлен htmlString.

document.querySelector('main').innerHTML += `<article class='post'></article>`;

Этот шаблон прост и универсален.В одной строке можно создать несколько тегов с атрибутами и контентом.Он ограничен либо перезаписью контента: =, либо добавлением контента: +=.

^✱ Редактировать: Кайидо сообщил мне, что .innerHTML заменит все, поэтому, если вы беспокоитесь о привязках событий или ссылках, не используйте их.См. Комментарии ниже.

---

.insertAdjacentHTML(position, htmlString)

Это .innerHTML на стероидах.Он будет вставлять до / после / внутри / снаружи заданного htmlString целевого тега.Первый параметр - это одна из четырех строк, которые определяют позицию вставки относительно целевого тега:

"beforebegin" <div id="target"> "afterbegin" text content "beforeend" </div> "afterend"

Второй параметр - это htmlSting для вставки.

document.getElementsByTagName('MAIN')[0].insertAdjacentHTML('afterbegin', `
  <article class='post'></article>
`);                    

---

Я не мог следовать вашему коду, но это должен быть метод?Таким образом, у демо есть объект с именем populate, и есть фабричная функция с именем documentSection(), которая создает объекты и наследует метод .createSection() от populate.

Demo

let text = ['post 1', 'post 2', 'post 3'];
let archives = ['document 1', 'document 2', 'document 3'];

const populate = content => ({
  createSections: () => {
    let idx = 0;
    const target = document.querySelector("main");
    /* 
    Pattern 1 - document.createElement(tagName)
    */
    const section = document.createElement('SECTION');
    section.id = content.title;
    target.appendChild(section);
    /*
    Pattern 2 - .innerHTML += htmlString
    */
    section.innerHTML += `<h2>${content.title}</h2>`;
    for (let text of content.text) {
      idx++;
      /*
      Pattern 3 - .insertAdjacentHTML(position, htmlString)
      */
      section.insertAdjacentHTML('beforeend', `<article id="${content.title}-${idx}" class="t">${text}</article>`);
    }
  }
});

const documentSection = (title, text) => {
  let content = {
    title: title,
    text: text
  };
  return Object.assign(content, populate(content));
};

const post = documentSection('Post', text);
const archive = documentSection('Archive', archives);

post.createSections();
archive.createSections();

main {
  display: table;
  border: 3px ridge grey;
  padding: 2px 10px 10px;
}

h1 {
  font: 900 small-caps 1.5rem/1 Tahoma;
  margin-bottom: 8px
}

h2 {
  font: 700 small-caps 1.2rem/1 Tahoma;
  margin-bottom: 8px
}

section {
  border: 2px solid #000;
  padding: 2px 8px 8px;
}

article {
  font: 400 1rem/1.25 Arial;
}

.t::before {
  content: attr(id)': ';
  font-weight: 700;
}

<main>
  <h1>Documents</h1>
</main>

Answer 2

Если вы используете JavaScript, вы должны следовать документу: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement, и здесь: CreateElement с идентификатором?

let elToAdd = document.createElement('div')
// then call `elToAdd.xxxx` to add attributes or do other operation on the element
elToAdd.setAttribute("id", "ans" + i);
// ... more

Если вы используете jQuery, выможно использовать:

let elToAdd = jQuery("<div id='ans"+j+"' class='lans'></div>")