gpt4 book ai didi

javascript - innerHTML 和 document.createTextNode 有什么区别

转载 作者:行者123 更新时间:2023-12-02 23:54:00 24 4
gpt4 key购买 nike

所以我编写了一个简单的表单输入,它接受一个名称,然后使用 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 创建一个新的文本节点。此方法可用于转义 HTML 字符,而 innerHTML 用于获取或设置元素节点的 HTML 内容。

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

关于javascript - innerHTML 和 document.createTextNode 有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55490127/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com