当前位置:首页 > IT技术

JS中的innerHTML,innerText,value的区别

时间:2019-08-21 04:41:04来源:IT技术作者:SEO探针小编阅读:83次「手机版」
 

innertext

一、区别

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" οnclick="test1()" value="value" /><br/>
<input type="button" οnclick="test2()" value="innerHTML"/><br/>
<input type="button" οnclick="test3()" value="innerText"/><br/>
</body>
</html>

刷新页面:

           点击相应的按钮,看显示的内容:

value:

  

innerHTML:

          

innertext:

 

三、结论

 1.innerText是标签内的文本,输入输出的是字符串;

2.innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;

3.value是表单元素特有的属性,输入输出的是字符串;

相关阅读

Betway线上视频

之前 遇到ScrollView中嵌入ListView,GridView冲突的解决(让ListView全显示出来) 链接网上查找资料,代码大致如下:import android.conte

大淘客和淘宝联盟区别是什么?怎么设置大淘客pid?

做淘宝客的朋友肯定都有听说过大淘客,这是一个很受淘客朋友喜爱的平台,这里的商品种类非常多,优惠券额度很大,且最重要的是,佣金很高,是

InvalidateRect和Invalidate的区别

Invalidate();   执行时,是先用背景刷清屏以后,再重新绘画 InvalidateRect(rect), 他执行时, rect区域以背景刷清屏,rect以外的区域

innerHTML的基本用法

定义:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 /*这串代码的var a的变量是我瞎写的。我忘记js咋样定义变量

JS学习笔记 location.href和location.replace的大致

今天学校的外聘老师告诉我们,公司开发过程中,因为新手的一些误操作造成了许多问题,举个例子,在项目中 比如要购买一件商品 ,并且有一

分享到:

栏目导航

推荐阅读

热门阅读