innerHTML插入DOM元素时显示[object HTMLFormElement]是什么原因？

问题根因 #

模板字面量进行变量插值时，会自动将非字符串类型的变量调用toString()方法转为字符串。你在editListFormTemp函数中返回的是HTMLFormElement类型的DOM对象，它的toString()返回值就是[object HTMLFormElement]，你将这个字符串赋值给innerHTML，自然只会渲染这段文本，不会渲染预期的表单。

解决方法 #

方法1：使用DOM操作方法插入元素（更推荐） #

不要通过innerHTML赋值，直接用appendChild方法把创建好的表单DOM元素插入到列表项中，同时注意把DOM实例声明移到函数内部，避免多次调用复用同一个实例：

function editlistItemTemp(name) {
  const editListItem = document.createElement('li');
  editListItem.classList.add('list-item-edit-view');
  // 直接插入返回的DOM元素
  editListItem.appendChild(editListFormTemp(name));
  return editListItem;
}

function editListFormTemp(value) {
  const editListForm = document.createElement('form');
  editListForm.classList.add('edit-list-form');
  const input = document.createElement('input');
  input.classList.add('list-edit-input');
  input.type = 'text';
  input.value = value;
  input.placeholder = 'List Name';
  input.required = true;
  editListForm.appendChild(input);
  return editListForm;
}

方法2：让表单生成函数返回HTML字符串 #

如果你要继续用模板字面量插值到innerHTML，就不要返回DOM对象，直接返回HTML字符串即可：

function editlistItemTemp(name) {
  const editListItem = document.createElement('li');
  editListItem.classList.add('list-item-edit-view');
  editListItem.innerHTML = editListFormTemp(name);
  return editListItem;
}

function editListFormTemp(value) {
  // 直接返回HTML字符串
  return `
  <form class='edit-list-form'>
    <input class='list-edit-input' type='text' value='${value}' placeholder='List Name' required />
  </form>`;
}

注意事项 #

• 原代码将editListItem、editListForm声明在函数外部作为全局变量，每次调用函数都会修改同一个DOM实例，如果你需要生成多个列表项，会出现所有列表项共用同一个表单、最后一次调用覆盖之前所有配置的问题，建议把这两个变量的声明移到对应的函数内部，每次调用生成新的实例。
• 方法2直接用模板字面量拼接用户传入的value到HTML中存在XSS注入风险，如果value是用户可自定义的内容，建议先做转义处理，优先使用方法1的DOM属性赋值方式更安全。

内容的提问来源于stack exchange，提问作者JordanH