value,innerHTML,innerText,textContent属性

value是带有value属性的标签拥有的值。一般是单闭合标签的属性。(可赋值,也可获取值)
innerHTML属性,双闭合标签两个标签之间的内容。(识别标签)(可赋值,也可获取值)
innerText属性,双闭合标签两个标签之间的内容。(不识别标签)(可赋值,也可获取值)
textContent属性和innerText类似,老版本的火狐支持该属性(无老版本,未打印)。(可赋值,也可获取值)


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id="inp" type="text" value="我是value属性获取的值"/>
    <div id="box">
        <ul>
            <li>我是innerHTML属性获取的值</li>
        </ul>
        hello
    </div>
    <div id="box2">
        <ul>
            <li>我是innerText属性获取的值</li>
        </ul>
        hello
    </div>
    <script>

        console.log(document.getElementById("inp").value)

        console.log(document.getElementById("box").innerHTML);
        //document.getElementById("box").innerHTML = "<li>我是赋值的li</li>";

        console.log(document.getElementById("box2").innerText);

    </script>
</body>
</html>

 
时间: 2024-10-05 17:55:16

value,innerHTML,innerText,textContent属性的相关文章

innerHTML,innertext,textContent区别

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .demo{ 8 visibility: hidden; 9 } 10 .test{ 11 display: none; 12 } 13 </style> 14 </head> 15 <body

innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的.它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉.注意,innerText是非标准属性,Firefox不支持. 1.innerText受CSS影响,t

innerHTML属性,outerHTML属性,textContent属性,innerText属性,

innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. innerText属性和outerText属性在读取元素节点的文本内容时,得到的值是不一样的.它们的不同之处在于设置一个节点的文本属性时,outerText属性会使得原来的元素节点被文本节点替换掉.注意,innerText是非标准属性,Firefox不支持. 1.innerText受CSS影响,t

innerHTML,innerText,outHTML的用法及区别详解

innerHTML,innerText,outHTML的用法及区别,今天就详细的解说并且带有实例说明.大家一看就明白,进入正题,接下来我们用下面的这段代码做测试 <div id="tianzi"> <span style="color:red">www.seostudying.com</span> </div> 1.tianzi.innerText 它得到的是<div></div>标签中的文本节

innerText Textcontent浏览器兼容代码

设置标签中的文本内容,应该使用textcontent属性,谷歌,火狐支持    IE8不支持 设置标签中的文本内容,应该使用textcontent属性,谷歌,火狐,IE8都支持 如果这个属性在浏览器中都不支持,那么这个属性的类型是“undefined” 判断这个属性的类型是不是“undefined”,就知道浏览器是否支持 //设置任意的标签中间的任意文本内容 function setInnerText (element,text){ //判断浏览器是否支持这个属性 if(type element

IE下innerText与FoxFire下textContent属性的不同

<div> 我是中国 人 我<br/>爱 自己 的<div>祖国</div>. <div> IE下输出 我是中国 人 我 爱 自己 的 祖国. 总结:(IE中的innerText是需要对innerHTML的值进行) 1.HTML转义(等同于XML转义,对<.&等转义字符进行处理): 2.经过HTML解释和CSS样式解释: 3.之后又剔除格式信息之后留下的纯文本. FoxFire下输出 (换行) 我是中国 人 我爱 自己 的祖国. 总

innerHTML outerHTML innerText textContent的区别

在网上看了很多博文介绍他们之间的区别,大部分都说FF中innerText不能使用,但经过自己试验,是可以用的,所以自己把各种情况总结了一下. 首先是innerHTML,这个就不用多说了,返回的是标签内部所有的内容,包括标签和文本,还有空格 举两个栗子,对比一下空格导致的输出区别 <div id="main">1 <span>123</span> <p>222</p> <div class="test"

javaScript中innerHTML,innerText,outerHTML,outerText的区别

开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. 来看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

innerHTML innerText的使用和区别

document对象中有innerHTML.innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的: 1) innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身) 2) outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身) 3) innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身) 4) outerTe