首先，针对API的所属进行分类：
HTML DOM属性：
- innerHTML
- innerText
- outerHTML
- outerText
- document.write
- document.writeIn
jQuery API:
- text()
- html()
- val()
innerHTML、innerText、outerHTML、outerText
innerXXXX和outerXXXX的区别在于：
innerXXXX设置和读取的内容不包含操作的对象本身,outerXXXX则包含
XXXXHTML和XXXXText的区别在于:
XXXXHTML设置和读取的范围包括html标签以及文本内容，而XXXXText则只针对文本内容
document.write与document.writeIn
作用基本相同，唯一的区别:document.writeIn输出时会产生换行，document.write则不会。
但要注意的一点是，除非特殊需要，尽量避免使用document.write与document.writeIn.因为这两个API可能会导致页面整体重绘。
<body>
<p>我是第一个段落</p>
<script>document.write('<p>我是第二个段落</P>')</script>
<p>我是第三个段落</p>
</body>嵌入在html文档内部时效果显示：
我是第一个段落
我是第二个段落
我是第三个段落当紧贴放置在</head>标签前：
我是第二个段落
我是第一个段落
我是第三个段落当紧贴</body>标签前：
我是第一个段落
我是第三个段落
我是第二个段落或使用setTimeout执行document.write时，页面会被重绘，只剩下write()的内容：
我是第二个段落浏览器在渲染html文件时，会产生一个文档流，从上至下顺序进行渲染，在遇到<script>后，会立即解析里面的脚本内容(同时阻塞html的渲染),当渲染完毕后浏览器关闭文档流，此时setTimeout执行的脚本会导致浏览器重新打开一个文档流，原来的内容则全部被清空。
text()、val()、html()
这三个API都是jq封装的类似于innerHTML、innerText用于设置和读取内容的，html()和text()一个作用到html标签、另一个只作用于文本内容、val()则是针对于input元素进行操作。
html()
当html()匹配多个元素时，读取内容只会读取到第一个符合的元素，而设置则会将全部符合条件的元素都按规定改变。
text()
text()匹配多个元素时，不论是读取还是设置都会针对到每一个元素。
val()
针对于type=radio的input元素，类似html(),当有多个选项时，若想获得选取的input的value值时：
$('#button').on('click',function(){
var checked = $('input').val();
console.log(checked);
});此时，获取到的总是第一个input元素的value值（该情况同样发生于type=checkbox的input元素）。若要获取被选择的input元素的value值，请使用:checked
$('#button').on('click',function(){
var checked = $('input:checked').val();
console.log(checked);
});对于type=checkbox的Input元素，请使用each()进行遍历：
$('#button').on('click',function(){
$('#box input:checked').each(function(){
console.log($(this).val());
})
});对于multipe=multipe的select元素则又有不同：
$('#button').on('click',function(){
var checked = $('#box').val();
for(var key in checked){
console.log(checked[key]);
}
});此时，val()返回的是包含每个被选中的option的数组。
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
