定义
针对API属性进行分类
| HTML DOM 属性 | JQuery API |
|---|---|
| innerHTML | text() |
| outerHTML | html() |
| innerText | val() |
| outerText |
- innerHTML设置或获取位于对象起始和结束标签内的 HTML
- outerHTML设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
- html() 方法返回或设置被选元素的内容 (inner HTML);返回值时反正匹配的第一，设置时设置所有
- text() 方法方法设置或返回被选元素的文本内容；当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）
- val()方法返回或设置被选元素的值；多用于input框、select框
示例
1、innerHTML、 OuterHTML、innerText、OuterText
① 获取
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="text">
隶属于div标签中的文字
<span>
隶属于span标签中的文字
</span>
</div>
</body>
</html>
<script type="text/javascript">
var textId = document.getElementById('text');
console.log(textId.innerHTML);
console.log(textId.outerHTML);
console.log(textId.innerText);
console.log(textId.outerText);
</script>
输出结果
②设置
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<ul>
<li id="text_1" onclick="innerHTMLSet()">innerHTML设置效果</li>
<li id="text_2" onclick="outerHTMLSet()">outerHTML设置效果</li>
<li id="text_3" onclick="inneTextSet()">innerText设置效果</li>
<li id="text_4" onclick="outerTextSet()">outerText设置效果</li>
</ul>
</body>
</html>
<script type="text/javascript">
var text = '<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>';
function innerHTMLSet() {
document.getElementById('text_1').innerHTML = text;
}
function outerHTMLSet() {
document.getElementById('text_2').outerHTML = text;
}
function inneTextSet() {
document.getElementById('text_3').innerText = text;
}
function outerTextSet() {
document.getElementById('text_4').outerText = text;
}
</script>
点击之后
查看DOM
在IE10、Chrome 66表现一致；Firefox 58 下不支持outerText()方法。
2、html()、text()、val()
① 获取
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="text">
隶属于div标签中的文字
<span>
隶属于span标签中的文字
</span>
</div>
<input id="input" type='text' value="你好">
</body>
</html>
<script type="text/javascript">
console.log($("#text").html());
console.log($("#text").text());
console.log($("#input").val());
</script>
输出结果
②设置
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
<li id="text_1">html()设置效果</li>
<li id="text_2">text()设置效果</li>
</ul>
<input id="text_3" value="before click"> val()设置效果
</body>
</html>
<script type="text/javascript">
var text = '<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>';
$("#text_1").on('click', function(event) {
$(this).html(text);
});
$("#text_2").on('click', function(event) {
$(this).text(text);
});
$("#text_3").on('click', function(event) {
$(this).val('after click');
});
</script>
点击之后效果
查看DOM
参考
=====
innerHTML、innerText
innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
网友评论