outerHtml和innerHtml的区别

最新推荐文章于 2023-09-15 14:00:00 发布
最新推荐文章于 2023-09-15 14:00:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： html 文章标签： function html javascript 浏览器 div ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwygn/article/details/6717629
版权

outerHTML

  

图 例分析outerHTML的用法——与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id 为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过右图展示出来。

　　outerHTML可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签．

　　innerHTML是用来获取元素内的html内容和文本．

　　innerTEXT只获取元素内的文本内容，html标签将被忽略．

　　以上三者方法类似大家不要混淆．注意outerHTML不是W3C标准，且只支持IE浏览器．

　　示例代码（可直接复制后转存执行）:　

　　<html>

　　<head>

　　<title>Demo</title>

　　<style><!-- body {font-family:"宋体";color="blue";font-size="9pt"} --></style>

　　<script language="JavaScript">

　　//.innerHTML　

　　function innerHTMLDemo()　

　　{

　　test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的HTML.</u></i>";

　　}

　　//.innerText　

　　function innerTextDemo()　

　　{

　　test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";

　　}

　　//.outerHTML　

　　function outerHTMLDemo()　

　　{

　　test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";

　　}　

　　//.outerText　

　　function outerTextDemo()　

　　{

　　test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";

　　}　

　　</script>

　　</head>

　　<body>

　　<ul>

　　<li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>

　　<li id="test_id2"οnclick="innerTextDemo()">innerText效果.</li>

　　<li id="test_id3"οnclick="outerHTMLDemo()">outerHTML效果.</li>

　　<li id="test_id4"οnclick="outerTextDemo()">outerText效果.</li>

　　</ul>

　　</body>

　　</html>

xwygn
关注
专栏目录
innerHTML，outerHTML,innerTEXT三者之间的区别
10-31
innerHTML，outerHTML,innerTEXT三者之间的区别
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
innerHTML与outerHTML的区别
延宾的博客
04-14 2126
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子：   test1 test2  1）innerHTML的值是“test1 test2 ” 2）outerHTML的值是test1 test2
innerhtml与outerhtml的区别
qq_42459832的博客
01-12 3780
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子1： <div id="test"> <span style="color:red">test1</span> test2 </div> 1）innerHTML的值是“<span style="color:red">test1</
innerHTML和outerHTML有什么区别
热门推荐
"代码"的日常搬运
04-24 2万+
就是用来了解innerHTML和outerHTML有什么区别。
innerHTML和outerHTML、innerText与outerTex
jing_xin的专栏
04-12 1850
innerHTML、outerHTML、innerText、outerText的区别(2009-02-26 21:29:32)标签：it 分类：JavaScript 下面的内容是网上找的，看完之后我的理解就是inner是指标签内的内容（不包括标签对象本身），outer是指标签对象本身及其标签里面的内容（包括标签对象本身）。 1、功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
IE innerHTML,outerHTML所引起的问题
09-06
在JavaScript编程中，`innerHTML` 和 `outerHTML` 是两个非常重要的属性，它们主要用于操作HTML元素的内部和外部HTML结构。然而，在某些情况下，尤其是在Internet Explorer（IE）浏览器中，不恰当使用这两个属性可能...
JavaScript中innerHTML，innerText，outerHTML的用法及区别
12-28
不废话了，请看下文示例介绍。 用法： <span xss=removed>test1</span> test2 在JS中可以使用： test[removed]: ...　上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。...
innerHTML和outerHTML
songdj89的专栏
07-28 434
TableRow 对象代表一个 HTML 表格行。而innerHTML是TableRow 对象的一个属性，t
innerHTML和outerHTML的区别
时清云的博客
07-05 1739
为什么要总结innerHTML和outerHTML的区别呢，主要是在看vue.js官方文档时，看到生命周期时 )] 原生的方法有点忘了，所以要重拾起来。 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
Karka_的博客
09-15 5390
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerHTML与outerHTML 的区别？
责任与担当
07-25 777
1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div> <script type="text/javascript"> var hj=document.getElementById("test").innerHT...
innerHtml与outerHtml的区别
一天进步一点点
01-23 174
innerHTML：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码 outerHTML:得出调用该方法的节点及该节点下的HTML代码 [img]http://dl.iteye.com/upload/attachment/197491/cfab658a-0b3d-379f-b48c-dc5aeb24dc5e.gif[/img] Demo: [code=...
innerHTML和outerHTML区别
Alice_sy314的博客
07-28 391
1.innerHTML 代码： 运行结果： 2.outerHTML 代码： 运行结果： 注意： 1.innerHTML 设置或获取位于对象起始和结束标签内的HTML 2.outerHTML设置或获取对象及其内容的HTML形式 3.outerHTML属性只有IE浏览器才有，其它浏du览器是不支持的 ...
innerHTML和outerHTML的区别，jQuery删除节点的方法
小雨的博客
11-12 1635
一、区别： 1）innerHTML: 　　从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子： test1 test2 1）innerHTML的值是“test1 test2 ” 2）outerHTML的值是test1 test2 -----------------
outerHTML的用法——与innerHTML不同
totem's
04-10 1960
图例分析outerHTML的用法——与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来 与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的
innerhtml和outerhtml的区别
03-16
innerHTML和outerHTML是两个不同的属性，用于获取或设置HTML元素的内容。 innerHTML属性用于获取或设置元素的内部HTML内容，包括标签和文本。例如，如果一个元素的innerHTML是"<p>Hello World!</p>"，那么它将包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值