innerHTML 和 document.createTextNode 有啥区别 [重复]
Posted
技术标签:
【中文标题】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>
【问题讨论】：
这似乎是重复的：***.com/questions/13122760/…innerHTML 是一个节点的属性...document.createTexNode 创建一个文本节点...它们完全不相关
【参考方案1】：
document.createTextNode 创建一个新的文本节点。此方法可用于转义 HTML 字符，而 innerHTML 用于获取或设置元素节点的 HTML 内容。
如果您想使用html 更新某些内容，那么innerHTML 为您完成这项工作，否则document.createTextNode 是更安全的功能。
【讨论】：
以上是关于innerHTML 和 document.createTextNode 有啥区别 [重复]的主要内容，如果未能解决你的问题，请参考以下文章