Question

因此，我编写了一个简单的表单输入，该表单输入一个名称，然后使用li.innerHTML =“”将其显示在下面的列表中。我想知道如果我使用了 li.appendChild（document.createTexNode（“ blabla”））;

const form = document.querySelector("#myForm");
const btn = document.querySelector("#submitBtn");
const name = document.querySelector("#nameInput");
const msg = document.querySelector(".msgBox");
const namesList = document.querySelector("#userList");

var i = 1;

form.addEventListener("submit", (e) => {
    e.preventDefault();
    if (name.value === "")
    {
        msg.innerHTML = "Please enter a name!";
        setTimeout(() => msg.remove(), 2000);
    } else {
        const li = document.createElement("li");
        li.innerHTML = name.value;
        namesList.appendChild(li);
        name.value = "";
    }
})

HTML文件（如果需要）

<html>

  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <h1>Unesite ime</h1>
    <div class="msgBox"></div>
    <form id="myForm">
      <input id="nameInput" type="text">
      <input type="submit" id="submitBtn" value="Submit">
    </form>
    <ol id="userList"></ol>
  </body>
  <script src="main.js"></script>
</html>

Answer 1

document.createTextNode创建一个新的Text节点。此方法可用于转义HTML字符，而innerHTML用于获取或设置元素节点的HTML内容。

如果您想使用html更新某些内容，那么innerHTML为您完成任务，否则document.createTextNode是更安全的功能。

innerHTML和document.createTextNode之间有什么区别？

1 个答案: