JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val() ？

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

元素内容，则只需一行代码：

div.innerText = "Hello world!";

执行这行代码后，页面的 HTML 代码就会变成如下所示：

Hello world!

设置 innerText 属性移除了先前存在的所有子节点，完全改变了 DOM 树。

设置 innerText 永远只会生成当前节点的一个子文本节点，而为了确保只生成一个字文本节点，就必须要对文本进行 HTML 编码。利用这一点，可以通过 innerText 属性过滤掉 HTML 标签。方法是将 innerText 设置等于 innerText，这样就可以去掉所有 HTML 标签，比如：

div.innerText = div.innerText;

执行这行代码后，就用原来的文本内容替换了容器元素中的所有内容（包括子节点，因而也就去掉了 HTML 标签）。举个栗子：

HTML代码：

请输入北京今天空气质量：

控制台输出：

4、outerText 属性

除了作用范围扩大到了包含 调用它的节点之外，outerText 与innerText 基本上没有多大区别。在读取文本值时，outerText 与 innerText 的结果完全一样。但在写模式下，outerText 就完全不同了：outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。比如：

div.outerText = "Hello world!";

这行代码实际上相当于如下两行代码：

var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(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。例子：

2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象。

3、val()方法主要用于获取表单元素的值，如input, select 和 textarea。当在一个空集合上调用，它返回undefined；

1、无参 val() :获取匹配的元素集合中第一个元素的当前值。例子：

HTML代码：

控制台输出：

2.有参val（val）：设置每一个匹配元素的值。返回一个jquery对象。