innerText,innerHtml

之前在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

结果是: 
 
 

• 
  2531

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

就是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

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

innerHTML 中CSS没有生效，同样，javascript没有生效

：：CSS的写入必须使用write方式

document.write只推荐在页面onload之前使用

如果加载时就要用脚本输出,用document.write好一点! 速度会更快!
如果网页已经加载完毕,用innerHTML会更安全一点,用document.write会出错

from here:http://blog.csdn.net/qq_36356142/article/details/53023916

http://blog.csdn.net/yoany/article/details/44460793