innerText,innerHtml

最新推荐文章于 2024-12-11 10:01:42 发布

转载最新推荐文章于 2024-12-11 10:01:42 发布 · 273 阅读

本文详细解析了JavaScript中的innerHTML、innerText、outerHTML及value等属性的区别与应用场景，并通过实例代码帮助理解。

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

之前在JavaScript中写代码的的时候,总被innerHTML、innerText、outerHTML以及value搞晕,用的时候不经意间就会用错。现在又有学习的朋友被搞晕了,特意总结一下。
定义：
innerHTML: 属性设置或返回表格行的开始和结束标签之间的 HTML。（也就数说，用innerHTML的元素必须是标签对的形式，也就是input啥都输不出来）。
outerHTML: 设置或获取对象及其内容的 HTML 形式。（标签对，input输出本身）
innerText： 设置或获取位于对象起始和结束标签内的文本。（标签对,input啥也输不出来）
value 这个用的地方比较多,这里仅以input中的value为例。就是input的值。(标签对,输出undefined)
看html结构代码：

 1
2
3
4
5
6
7
8

<span id="outer" value="这是outer">
    <span id="mid" value="这是mid">
        <span id="inner" value="这是inner">text</span>
        <input type="text" id="input" value="这是input的内容"/>
    </span>
</span>
 1
2
3
4
5
6

再看JS中的代码:

    var outer = document.getElementById('outer');
    var mid = document.getElementById('mid');
    var inner = document.getElementById('inner');
    var input = document.getElementById('input');

    console.log('outer的value是' + outer.value);
    console.log('outer的innerHTML是' + outer.innerHTML);
    console.log('outer的outerHTML是' + outer.outerHTML);
    console.log('outer的innerText是' + outer.innerText);

    console.log('  mid的innerHTML是' + mid.innerHTML);
    console.log('  mid的outerHTML是' + mid.outerHTML);
    console.log('  midr的innerText是' + mid.innerText);

    console.log('inner的innerHTML是' + inner.innerHTML);
    console.log('inner的outerHTML是' + inner.outerHTML);
    console.log('inner的innerText是' + inner.innerText);

    console.log('input的innerHTML是' + input.innerHTML);
    console.log('input的outerHTML是' + input.outerHTML);
    console.log('input的innerText是' + input.innerText);
    console.log('input的value是 ' + input.value);

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结果是:
这里写图片描述

今天有一个比较困惑的地方

就是value和innerHTML的区别

后来查询了一下

知道了：

div td等HTML元素是没有value属性的需要用innerHTML

而button text什么的就有value属性

HTML DOM元素和HTML元素的区别

HTML元素都是静态的

HTML DOM是javascript的一部分

是动态的

document.write直接输出在浏览器，后面继续write ，内容会一直在后面添加。

innerHTML就是获取或设置指定DOM元素(id)的内容，就是<div id="dddd"></div>之间的东西。与id挂钩。

innerHTML可以方便有快捷的插入大段的HTML内容，但是不能对innerHTML插入的内容进行处理。还有一点要说的是innerHTML不是W3C DOM标准的组成部分，而是一项专利技术。

在document中write脚本是作为文本直接处理，CSS风格奏效

[javascript]view plain copy 
     
 
     
 <script type="text/javascript">  
 document.write("<script>alert('aaa')</script>"); //脚本报错  
 document.write("<script>alert('aaa')</script>"); //直接显示的是<script>alert('aaa')</script> ,不能生成<script>到新的窗口  
 document.write("<style>a{color:red;font-weight:bold;}</style>");  
 </script>  