DOM中的outerHTML,innerHTML,innerTEXT,innerText的区别

最新推荐文章于 2024-07-17 18:42:40 发布
最新推荐文章于 2024-07-17 18:42:40 发布
阅读量686 收藏
点赞数
分类专栏： html 文章标签： function html javascript

　1、功能讲解:
　　innerHTML 设置或获取位于对象起始和结束标签内的 HTML
　　outerHTML 设置或获取对象及其内容的 HTML 形式
　　innerText 设置或获取位于对象起始和结束标签内的文本
　　outerText 设置(包括标签)或获取(不包括标签)对象的文本
　　2、示例代码（可直接复制后转存执行）:
　　<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>
　　3、不同之处:
　　简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
　　1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

　　　
zgmzyr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级程序设计之DOM 扩展之HTML5之插入标记第11.3.6讲
Jane617_min的专栏
11-05 976
虽然DOM 为操作节点提供了细致入微的控制手段，但在需要给文档插入大量新HTML 标记的情况 下，通过DOM 操作仍然非常麻烦，因为不仅要创建一系列DOM 节点，而且还要小心地按照正确的顺 序把它们连接起来。相对而言，使用插入标记的技术，直接插入HTML 字符串不仅更简单，速度也更 快。以下与插入标记相关的DOM 扩展已经纳入了HTML5 规范。 1. innerHTML 属性 在读模式
input file 清空已选择的文件的方法
javaSamBlog
08-11 3388
1.&lt;input name=f type=file&gt;&lt;input type=button value=清空 onclick=f.createTextRange().execCommand("delete")&gt;   2&lt;input name=f type=file&gt;&lt;input type=button value=清空 onclick="f.outer...
DOM对象的innerHTML与outerHTML比较
jCuckoo的专栏
05-05 1824
<br /><html> <head> <title>Demo</title> <mce:style><!-- body {font-family:"宋体";color="blue";font-size="9pt"} --></mce:style><style mce_bogus="1"> body {font-family:"宋体";color="blue";font-size="9pt"}</style> <mce:script language="JavaScript"><!--
JavaScript题库
CIA的博客
08-16 5329
下面语句得到值为true的有 A C A “1” == 1 B 1===“1” C “2” > “19” D “2”==19 下面哪些方法可以实现将字符串“123”变成数值型 (还没学) A B C D A Number() B parseInt() C parseFloat() D Boolean() 下面声明变量及赋值的写法正确的有__________ B C D A var _myName = 12a B var _myName = “12a” C var myName = .
运用innerHTML的插入样式
web开发自学
09-16 773
把一段包含&lt;style&gt;的html插入到一个dom里面 结果发现 IE对这里的顺序要严格要求。必须先插入html内容然后再插入&lt;style&gt;样式才生效例如 &lt;DIVID="test"&gt;&lt;/DIV&gt; &lt;SCRIPTLANGUAGE="JavaScript"&gt; document.getElementById("test&qu
JavaScript之innerHTML和outerHTML，innerText和outerText
weixin_50464560的博客
07-02 954
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 区别 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身) 2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身） 3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身） 4） outerText设
innerHTML和outerHTML以及innerText和outerText之间的区别
weixin_47450807的博客
02-05 808
一、innerHTML和outerHTML的关系 在面试中也常常问道innerHTML和outerHTML之间的区别，这里我们总结一下。innerHTML表示内部文本，如下所示。 <div><h1>大家好</h1></div> 其打印其innerHTML的值为： <h1>大家好</h1> outerHTML表示外部文本，包含标签。 其打印outerHTML的值为: <div><h1>大家好</h1&gt
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,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
详谈innerHTML innerText的使用和区别
08-29
document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的知识。 首先，让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
JavaScript中innerHTML，innerText，outerHTML的用法及区别
10-23
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
innerText，innerHTML,outerHTML的用法以及注意事项
小可的笔记本
03-22 263
 我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。一:动态改变文本和Html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w...
Web开发：四角线框效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-17 739
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
HTML2048小游戏（最新版）
w11111xxxl的博客
07-17 347
比上一篇文章的2048小游戏更好一点。
每日60秒新闻早报单页文字版HTML源码
2401_86030425的博客
07-17 172
每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。
原生html点击按钮上传文件(隐藏file输入框)
weixin_68658847的博客
07-17 171
原生html点击按钮上传文件(隐藏file输入框)
html超文本传输协议
m0_71332744的博客
07-15 265
" id="bottom">页脚手机：账户：提供基础的web界面。
在HTML中使用JavaScript
zhugedali_的博客
07-13 741
两数之和为：<span id="sumResult"></span>
InnerHtml outerHtml区别
06-08
innerHtml和outerHtml都是JavaScript中DOM节点对象的属性。 innerHtml是用来获取或设置某个元素节点的所有子节点（包括文本节点）的HTML内容，但不包括该元素本身的HTML标签。 outerHtml是用来获取或设置某个元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值