js中的innerHTML，innerText，value的区别

最新推荐文章于 2024-09-25 15:23:45 发布

原创最新推荐文章于 2024-09-25 15:23:45 发布 · 1.9w 阅读

10 ·

CC 4.0 BY-SA版权

web之jsp杂记专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了 Web 开发中 HTML 元素的 innerHTML, innerText 和 value 属性之间的区别。通过实例展示了如何使用这些属性来修改 HTML 内容、纯文本及输入框的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先说一下我自己认为的 innerHTML，innerText，value的区别

innerHTML 是在控件中加html代码就是设置一个元素里面的HTML

eg:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="<h1>My First JavaScript</h1>";
</script>
</body>
</html>

innerText 在控件中添加文字

<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";
</script>
</body>
</html>

value="" 我理解的就是控件中的value属性直接赋值成双引号里面的东西

<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<input id="input" type="text"></input>
<script>
document.getElementById("input").value="<h1>My First JavaScript</h1>";
</script>
</body>
</html>