JS中innerHTML、outerHTML、innerText、outerText、va。
。。
⼀、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？
1、innerHTML 属性
（参考⾃《JavaScript⾼级程序设计》294页）
在读模式下，innerHTML 属性返回与调⽤元素的所有⼦节点（包括元素、注释和⽂本节点）对应的 HTML 标记。在写模
式下，innerHTML 会根据指定的值创建新的 DOM 树，然后⽤这个 DOM 树完全替换调⽤元素原先的所有⼦节点。下⾯是⼀个例⼦。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
对于上⾯的<div>元素来说，它的 innerHTML 属性会返回如下字符串。
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2、outerHTML 属性
在读模式下，outerHTML 返回调⽤它的元素及所有⼦节点的 HTML 标签。在写模式下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM ⼦树完全替换调⽤元素。下⾯是⼀个例⼦。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
如果在<div>元素上调⽤ outerHTML，会返回与上⾯相同的代码，包括<div>本⾝。
使⽤ outerHTML 属性以下⾯这种⽅式设置值：
div.outerHTML = "<p>This is a paragraph.</p>";
这⾏代码完成的操作与下⾯这些 DOM 脚本代码⼀样：
var p = ateElement("p");
p.ateTextNode("This is a paragraph."));
placeChild(p, div);
结果，就是新创建的<p>元素会取代 DOM 树中的<div>元素。
replaceChild() ⽅法⽤新节点替换某个⼦节点。
语法：
3、innerText 属性
通过 innerText 属性可以操作元素中包含的所有⽂本内容，包括⼦⽂档树中的⽂本。在通过 innerText 读取值时，它会按照由浅⼊深的顺序，将⼦⽂档树中的所有⽂本拼接起来。在通过 innerText 写⼊值时，结果会删除元素的所有⼦节点，插⼊包含相应⽂本值的⽂本节点。下⾯是⼀个例⼦：
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
对于这个例⼦中的 <div> 元素⽽⾔，其中 innerText 属性会返回下列字符串：
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
使⽤ innerText 属性设置这个<div>元素内容，则只需⼀⾏代码：
div.innerText = "Hello world!";
执⾏这⾏代码后，页⾯的 HTML 代码就会变成如下所⽰：
<div id="content">Hello world!</div>
设置 innerText 属性移除了先前存在的所有⼦节点，完全改变了 DOM 树。
设置 innerText 永远只会⽣成当前节点的⼀个⼦⽂本节点，⽽为了确保只⽣成⼀个字⽂本节点，就必须
要对⽂本进⾏ HTML 编码。利⽤这⼀点，可以通过 innerText 属性过滤掉 HTML 标签。⽅法是将 innerText 设置等于 innerText，这样就可以去掉所有 HTML 标签，⽐如：
div.innerText = div.innerText;
执⾏这⾏代码后，就⽤原来的⽂本内容替换了容器元素中的所有内容（包括⼦节点，因⽽也就去掉了 HTML 标签）。举个栗⼦：
HTML代码：
<label id="lab">请输⼊北京今天空⽓质量：<input id="aqi-input" type="text"></label>
控制台输出：
4、outerText 属性
除了作⽤范围扩⼤到了包含 调⽤它的节点之外，outerText 与innerText 基本上没有多⼤区别。在读取⽂本值时，outerText 与innerText 的结果完全⼀样。但在写模式下，outerText 就完全不同了：outerText 不只是替换调⽤它的元素的⼦节点，⽽是会替换整个元素（包括⼦节点）。⽐如：
div.outerText = "Hello world!";
这⾏代码实际上相当于如下两⾏代码：
var text = ateTextNode("Hello world!");
placeChild(text,div);
本质上，新的⽂本节点会完全取代调⽤ outerText 的元素。此后，该元素就从⽂档中被删除，⽆法访问。
注：该属性在 Firefox 浏览器⾥没⽤：
在 Chrome 浏览器⾥：
5、value 属性
属性可设置或返回密码域的默认值。获取⽂本框的值。
⼆、jQuery中的text()、html()和val()
1、text()：设置或者获取所选元素的⽂本内容；
1. ⽆参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的⽂本内容组合起来的⽂本。返回的是⼀个String。例⼦：
2.有参text（val）：设置所有匹配元素的⽂本内容，与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回⼀个jquery对象。
2、html()：设置或者获取所选元素的内容（包括html标记）；
1. ⽆参html（）：取得第⼀个匹配元素的html内容。这个函数不能⽤于XML⽂档。但可以⽤于XHTML⽂档，返回的是⼀个String。例
⼦：
html ul标签2.有参html（val）：设置每⼀个匹配元素的html内容。这个函数不能⽤于XML⽂档。但可以⽤于XHTML⽂档。返回⼀个jquery对象。
3、val()⽅法主要⽤于获取表单元素的值，如input, select 和 textarea。当在⼀个空集合上调⽤，它返回undefined；
1、⽆参 val() ：获取匹配的元素集合中第⼀个元素的当前值。例⼦：
HTML代码：
<input type="text" value="你好啊">
<input type="text" value="啊哈哈哈">
<input type="text" value="嘻嘻嘻嘻">
控制台输出：
2.有参val（val）：设置每⼀个匹配元素的值。返回⼀个jquery对象。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。