innerHTML 和 document.createTextNode 有什么区别 [重复]答案

【问题标题】：Whats the differecne between innerHTML and document.createTextNode [duplicate]innerHTML 和 document.createTextNode 有什么区别 [重复]
【发布时间】：2019-08-24 16:27:36
【问题描述】：

所以我编写了一个简单的表单输入，它接受一个名称，然后使用 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>

【问题讨论】：

这似乎是重复的：stackoverflow.com/questions/13122760/…
innerHTML 是一个节点的属性...document.createTexNode 创建一个文本节点...它们完全不相关

标签： javascript dom

【解决方案1】：

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

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

【讨论】：