JS中的innerHTML，innerText，value的区别

最新推荐文章于 2024-08-05 18:47:29 发布

不见蝴蝶不见君。

最新推荐文章于 2024-08-05 18:47:29 发布

阅读量3.2w

点赞数 33

分类专栏： js

本文链接：https://blog.csdn.net/gabby____/article/details/82533753

版权

js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

一、区别

innerHTML

在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。

innerTEXT

打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。

value

显示双引号中的全部内容，显示标签，标签无效。

二、举例

例一

1、innerHTML

<!doctype html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerHTML="<b>hello world</b>"
</script>
</html>

2、innerTEXT

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p id="demo">my first demo</p>
</body>
<script>
    document.getElementById("demo").innerText="<h1>My First JavaScript</h1>";
</script>
</html>

3、value

<!doctype html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo">my first demo</p>
    <input id="input" type="text">
</body>
<script>
    document.getElementById("input").value="<b>hello</b>"
</script>
</html>

例二

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<script>
function test1(){
    
    window.alert(document.getElementById("value").value);
}

function test2(){

    window.alert(document.getElementById("innerHTML").innerHTML);

}

function test3(){

    window.alert(document.getElementById("innerText").innerText);

}
</script>
</head>
<body id="innerHTML">
消息内容：<span id="innerText">消息</span><br/>
<input type="text" id="value" /><br/>
<input type="button" onclick="test1()" value="value" /><br/>
<input type="button" onclick="test2()" value="innerHTML"/><br/>
<input type="button" onclick="test3()" value="innerText"/><br/>
</body>
</html>

刷新页面：

点击相应的按钮，看显示的内容：

value：