如何将在 Javascript 中创建的元素添加到 innerHTML

Question

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

function isValid(e) {
  if (totalBill.value.trim().length == 0) {
    let para = document.createElement("div");
    para.innerText = "Please enter the total amount of bill";
    // para.classList.add("bill-para");
    para.setAttribute('class', 'bill-error')
    console.log(para);
    errorDiv.innerHTML = para;
  }

  e.preventDefault();
}

HTML:

<div class="container">
        <div class="error">
            
        </div>
        <div class="box-container">
            <h1 class="heading">TIP CALCULATOR</h1>
            <form action="">
                <div class="box">
                    <label>How much was your bill?</label><br>
                    <input type="number" placeholder="Total Bill" class="total-bill">
                </div>
            </form>
       </div>

所以我试图在 div.error 部分添加一个 div 并且我想添加名为 div.bill-error 的 div 但是每当我试图替换innerHTML 和运行代码。它向我显示“[Object HTMLDivElement]”而不是“请输入账单总额”。但在控制台中，我看到 div 已创建。但是里面没有插入

谁能告诉我问题出在哪里和解决办法。非常感谢。

Answer 1

你试过了吗，替换

 errorDiv.innerHTML = para;

和

errorDiv.append(para);

Answer 2

使用 errorDiv.appendChild(para);，或者，如果您想先删除 errorDiv 中的现有内容，然后 errorDiv.textContent = ''; errorDiv.appendChild(para);。

Answer 3

使用 appendChild() ，我修改了你的代码，这是代码片段：

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

function isValid(e) {
  if (totalBill.value.trim().length == 0) {
    let para = document.createElement("div");
    para.innerHTML = "Please enter the total amount of bill";
    // para.classList.add("bill-para");
    para.setAttribute('class', 'bill-error')
    errorDiv.appendChild(para);
  }

}

<div class="container">
        <div class="error">
            
        </div>
        <div class="box-container">
            <h1 class="heading">TIP CALCULATOR</h1>
            <form action="">
                <div class="box">
                    <label>How much was your bill?</label><br>
                    <input type="number" placeholder="Total Bill" class="total-bill">
                </div>
                <button type="button" onclick="isValid();">Check</button>
            </form>
       </div>

如何将在 Javascript 中创建的元素添加到 innerHTML

How can I add an element created in Javascript to innerHTML

html

javascript

innerhtml