innerHTML、outerHTML、innerText、outerText的区别

最新推荐文章于 2025-08-21 23:22:44 发布

zhuanglonghai

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：脚本和标记语言文章标签： button input div function javascript html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zhuanglonghai/article/details/1430942

脚本和标记语言专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了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 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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