前端：DOM对象outerHTML、outerText、innerHTML、innerText属性

outerHTML | outerText | innerHTML | innerText
这四个都是js原生DOM对象的属性，返回的数据都是string类型。

看例子：

获取属性

var oHtml = $("div")[0].outerHTML;
var oText = $("div")[0].outerText;
var iHtml = $("div")[0].innerHTML;
var iText = $("div")[0].innerText;

<div>
    div 
    <a>a</a>
</div>

分别返回：

<div>
    div 
    <a>a</a>
</div>
---------------------
div a
---------------------
    div 
    <a>a</a>
---------------------
div a

设置属性

<body>
	<div>
	</div>
</body>

$("div")[0].outerHTML = "<a>a</a>";
$("div")[0].outerText = "<a>a</a>";
$("div")[0].innerHTML = "<a>a</a>";
$("div")[0].innerText = "<a>a</a>";

分别变成：

<body>
	<a>a</a>
</body>
---------------------
<body>
	&lt;a&gt;a&lt;/a&gt;
</body>
---------------------
<body>
	<div><a>a</a></div>
</body>
---------------------
<body>
	<div>&lt;a&gt;a&lt;/a&gt;</div>
</body>

也就是说，
outer和inner决定是不是包含最外层（当前）标签；
Text和HTML获取时决定是否把标签忽略，插入时决定是否把字符串解析为标签。

posted @ 2019-01-11 11:17  xuejianbest  阅读(623)  评论(0)  编辑  收藏  举报