时间戳

首页 > 解决方案 > 创建的表单显示为 [object HTMLFormElement]

javascript - 创建的表单显示为 [object HTMLFormElement]

问题描述

我正在使用模板文字创建一系列列表项，并在每个项目中构造组件。目前，我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 元素。

截屏

标签： javascript

解决方案

您需要使用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;
        }

推荐阅读