innerHTML、outerHTML、innerText、outerText的区别

本文通过实例演示了JavaScript中innerText与outerText属性的区别,并详细解释了这两种属性在DOM操作中的不同应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<script language="javascript">
var innertext="欢迎来到我的博客 你调用的div对象还没有消失";
var outertext="欢迎来到我的博客 你调用的div对象已经没有消失不信你试一试";
function change_outerText(objectID){
    
var divTextObject=document.getElementById(objectID);
    
if(!divTextObject){
        alert(
"outerText(): The "+objectID+" not found.");
    }
else{
        divTextObject.outerText
=outertext;
    }

}

function change_innerText(objectID){
    
var divTextObject=document.getElementById(objectID);
    
if(!divTextObject){
        alert(
"innerText(): The "+objectID+" not found.");
    }
else{
        divTextObject.innerText
=innertext;
    }

}

</script>

 
<div id="div"><button>Hello techno-dragon</button><font color="green"><h2>This is a DIV!</h2></font></div>
 
<br>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);"> 
<br>
由于上边无法解释innerText  和 outerText的区别所以看下面的按钮
<br>
<input name="change_outerText" value="outerText" type="button" 
OnClick
="change_outerText('div');"> 
<input name="change_innerText" value="innerText" type="button"
 OnClick
="change_innerText('div');"> 

 
</body>
</html>

上边代码运行就知道区别了^_^;

总结

inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值