Блог

Я создаю серию элементов списка, используя литералы шаблонов, и создаю компоненты внутри каждого элемента. В настоящее время я устанавливаю внутреннюю HTML часть элемента списка в выражение, которое создаст простой компонент формы. Однако я не вижу форму, но [object HTMLFormElement] вместо этого она отображается.

Мой код:

 let editListItem = document.createElement('li');
let editListForm = document.createElement('form');

function editlistItemTemp(name) {
  editListItem.classList.add('list-item-edit-view');

  editListItem.innerHTML = `
  ${editListFormTemp(name)}`;

  return editListItem;
}

function editListFormTemp(value) {
  editListForm.classList.add('edit-list-form');

  editListForm.innerHTML = `
  <input class='list-edit-input' type='text' value='${value}' placeholder='List Name' required />`;

  return editListForm;
}
 

Я знаю, что HTMLFormElement это коллекция, содержащая форму, но я не знаю, почему она отображается здесь таким образом. Я зарегистрировал функцию в консоли editListFormTemp() , и ничто не кажется неуместным, так как я получаю именно тот HTML-элемент, который ищу.

Скриншот

Вам необходимо использовать innerHtml возвращенные HTML :

 editListItem.innerHTML = editListFormTemp(name).innerHTML;
 

Также вы можете использовать append тоже: editListItem.append(editListFormTemp(name))

Вот рабочий образец:

  let editListItem = document.createElement('li');
        let editListForm = document.createElement('form');

        editlistItemTemp("text");

        function editlistItemTemp(name) {
            editListItem.classList.add('list-item-edit-view');

            editListItem.innerHTML = editListFormTemp(name).innerHTML;

            document.body.append(editListItem)

            return editListItem;
        }

        function editListFormTemp(value) {
            editListForm.classList.add('edit-list-form');

            editListForm.innerHTML = `<input class='list-edit-input' type='text' value='${value}' placeholder='List Name' required />`;

            return editListForm;
        }