CODEWITHSUNDEEP
javascript
JordanH
JordanH

Reputation: 139

Created form displays as [object HTMLFormElement]

I'm creating a series of list items using template literals and constructing components within each item. Currently, I'm setting the inner HTML of the list item to an expression that will create a simple form component. I don't see the form however, but [object HTMLFormElement] is displayed instead.

My code:

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;
}

I know that HTMLFormElement is the collection containing the form, but I don't know why it displays this way here. I've console logged the function editListFormTemp() and nothing seems out of place, as I get precisely the HTML element I'm looking for.

Screenshot

Upvotes: 0

Views: 465

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

You need to use innerHtml of returned HTML:

editListItem.innerHTML = editListFormTemp(name).innerHTML;

Also you can use append too: editListItem.append(editListFormTemp(name))

Here is working sample:

 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;
        }

Upvotes: 1

Related Questions