这个问题在这里已有答案：
所以我写了一个简单的表单输入，它接受一个名字然后使用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>
document.createTextNode创建一个新的Text节点。此方法可用于转义HTML字符，而innerHTML用于获取或设置元素节点的HTML内容。
如果你想用html更新一些东西，那么innerHTML会为你做这个工作，否则document.createTextNode是更安全的功能。