JS创建的DOM元素赋值给innerHTML显示[Object HTMLDivElement]怎么解决？

innerHTML属性仅支持传入HTML格式字符串，你给它赋值的是通过createElement生成的DOM节点对象，JS会自动将对象转为字符串，最终输出[Object HTMLDivElement]，无法正常渲染元素。

下面两种方案都可以实现需求：

• 方案1：使用appendChild插入DOM节点（推荐适配你现有代码逻辑）
  你只需要修改赋值逻辑，同时增加插入前清空历史错误提示的逻辑，避免重复生成提示：

const totalBill = document.querySelector(".total-bill");
let errorDiv = document.querySelector(".error");

function isValid(e) {
  e.preventDefault();
  // 先清空之前的错误提示，避免重复插入
  errorDiv.innerHTML = '';
  if (totalBill.value.trim().length == 0) {
    let para = document.createElement("div");
    para.innerText = "Please enter the total amount of bill";
    para.setAttribute('class', 'bill-error')
    // 用appendChild插入DOM对象
    errorDiv.appendChild(para);
  }
}

• 方案2：直接拼接HTML字符串赋值给innerHTML
  如果你不想操作DOM节点对象，可以直接传入符合要求的HTML字符串：

const totalBill = document.querySelector(".total-bill");
let errorDiv = document.querySelector(".error");

function isValid(e) {
  e.preventDefault();
  if (totalBill.value.trim().length == 0) {
    // 直接传入HTML字符串给innerHTML
    errorDiv.innerHTML = `<div class="bill-error">Please enter the total amount of bill</div>`;
  } else {
    // 输入合法时清空错误提示
    errorDiv.innerHTML = '';
  }
}

内容的提问来源于stack exchange，提问作者Shayla Sharmin Urmi