innerText、outerText、innerHTML与outerHTML的区别 实例详解

最新推荐文章于 2023-07-12 13:37:38 发布
最新推荐文章于 2023-07-12 13:37:38 发布
阅读量158 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dq201/article/details/84300085
版权
innerText、innerHTML与outerHTML、outerText的区别 实例详解
[size=x-small]1.x.innerHTML: 从对象的起始位置到终止位置的全部内容,包括Html标签。
2.x.innerText: 从对象的起始位置到终止位置的内容, 去除Html标签。
3.x.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。[/size]
[img]http://dl.iteye.com/upload/attachment/0074/8894/b4e21589-4c62-39c5-99fa-25342b133069.gif[/img]
看实例代码： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <BODY>
<div id="div">
	<input name="button" value="Button" type="button">
	<font color="green">
		<h2>This is a DIV!</h2>
	</font>
</div>
<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);">
 </BODY>
</HTML>


上例中 x.innerHTML 的值也就是“<span style=”color:red”>z1</span> z2 ”。
上例中 x.innerTest 的值也就是“z1 z2”, 其中span标签被去除了。
上例中 x.outerHTML 的值也就是<div id=”x”><span style=”color:red”>z1</span> z2</div> 。

特别说明：
innerHTML符合W3C标准，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例： 
<a href="javascript:alert(document.getElementById('x').innerHTML.replace(/<.+?>/gim,''))">无HTML标签,符合W3C标准</a>
dq201
关注
专栏目录
JavaScript初识
Yan1less的小窝
03-09 112
x=document.getElementById("demo");  // 找到元素x.innerHTML="Hello JavaScript!";    // 改变内容if(element.src.match("bulbon"))if后面有match我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 &lt;p&gt; 元素创建之后再执行脚本。\是折行var z=123e-5...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
JavaScript innerHTML的用法
Sunny笨笨
12-13 4713
今天先简单谈谈我对innerHTML的理解,innerHTML主要是用于获取对象的内容   先获取到id()  再获取到内容    内容的交换:今天不上班  var str1=document.getElementById("a");  var demo=str1.innerHTML;  str2.innerHTML=demo; 以下是图片的插入:
HTML的DOM的innerHTML用法，简化动态表格，控制样式css
最新发布
zhansan的博客
07-12 1406
" >删除\n"var text_a = document.createTextNode("删除");3. 创建td，设置td的文本为文本框的内容。5. 将td添加到tr中。//3.创建td，赋值td的标签体。//gender 的 td。//2.获取文本框的内容。//5.添加td到tr中。//name 的 td。//6.获取table。
js中text与html的区别,innerText和innerHTML之间的区别是什么？
weixin_33904522的博客
06-11 305
innerText和 innerHTML都是JavaScript的属性，但在处理文本上存在差异。下面本篇文章就来给大家介绍一下innerText和innerHTML之间的区别，希望对大家有所帮助。先让我们检查两者的语法，然后举一个例子来看看差异。语法：假设我们有一个名为x的JavaScript变量。var x = document.getElementById('test');下面是如何在这个变量...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
map()方法返回新数组
guojing5721的专栏
02-03 5628
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 如果需要在原数组基础上生成一个新数组，map方法是一个很好的选择，比如： letevens=[1,2,3,4,5] letodds=evens.map(v=>v+1) console.log(evens,odds) //打印...
JavaScript中的innerHTML使用
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
innerHTML使用方法
weixin_33802505的博客
11-13 182
使用方法： 比方在&lt;body&gt;中写了例如以下的代码：&lt;div id=top&gt;&lt;/div&gt;如今用top.innerHTML="..........";的方法就能够向这个id的位置写入HTML代码了。比如top.innerHTML="&lt;input type="button" name="我非常帅" value="说的对"
innerHTML 用法
yihuei123的专栏
04-23 6633
用法：比如在中写了如下的代码：现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。例如top.innerHTML="";就可以在top对应的位置出现一个button了！爽吧，在公告前加javascript就行老，直接改HTML。。。function Test(){        var str="";        str+="Hel
javascript中的innerHTML是什么意思，怎么个用法？
奔跑的蜗牛
09-22 10万+
nnerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容
innerHTML的基本用法
qq_35395612的博客
08-01 3万+
定义：innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 /*这串代码的var a的变量是我瞎写的。我忘记js咋样定义变量了，我是魔鬼我错了*/ &lt;p id="aa"&gt;...&lt;/p&gt; &lt;script&gt; var a=1; document.getElementById("aa").innerHTML=a; &lt;/scr...
innerHTML与innerText各代表什么含义
alex_hjl的专栏
11-19 637
innerHTML是指某个网页元素内部的代码,而innerTEXT是指某个网页元素的文本内容.写个例子给你: 测试 这样document.all("abc").innerHTML就是:测试 而document.all("abc").innerTEXT就是:测试 http://zhidao.baidu.com/question/26124653.html
innerHtml用法
龙的天空
03-09 2705
innerHtml用法function Test(){        var str="";        str+="Hello,";        str+="This is a Test!";        str+="I Love you;";        str+="I Love you,too!";        p.innerHTML=str+""+Math.rando
onclick和innerHTML的用法小实例
小怡糖包
07-01 2397
很多时候我们只知道一些函数的定义，但就是不知道它们的用法 ，给自己留个笔记，以后看 看代码： 第一个函数调用 新浪 function myFunction(){ x=document.getElementById("xinlang"); x.innerHTML="淘宝"; } 函数运行结果： 点击按钮之后结果变成下面的情况：
innerHTML作用和用法
热门推荐
cuishao
09-05 11万+
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：&lt;div id="aa"&gt;这是内容&lt;/div&gt; 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTM...
javascript 中innerHTML的用法
美丽的大黄人
06-25 1万+
javascript 中innerHTML的用法 语法 Object.innerHTML = “HTML”;//设置其内容 var html = Object.innerHTML;//获取其内容 例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
HTML属性详解：innerHTML、outerHTML、innerText与outerText的区别
- outerText与innerText类似，但同时包含了元素的文本和元素自身。在本例中，`test.outerText`等同于innerText，因为没有提供outerText的具体示例，通常其效果是删除元素内的所有HTML，保留元素外的HTML结构，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值