前端：DOM对象outerHTML、outerText、innerHTML、innerText属性

最新推荐文章于 2023-09-15 14:00:00 发布
最新推荐文章于 2023-09-15 14:00:00 发布
阅读量102 收藏 1
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/xuejianbest/p/10284948.html
版权

outerHTML | outerText | innerHTML | innerText
这四个都是js原生DOM对象的属性，返回的数据都是string类型。

看例子：

获取属性

var oHtml = $("div")[0].outerHTML;
var oText = $("div")[0].outerText;
var iHtml = $("div")[0].innerHTML;
var iText = $("div")[0].innerText;

<div>
    div 
    <a>a</a>
</div>

分别返回：

<div>
    div 
    <a>a</a>
</div>
---------------------
div a
---------------------
    div 
    <a>a</a>
---------------------
div a

设置属性

<body>
	<div>
	</div>
</body>

$("div")[0].outerHTML = "<a>a</a>";
$("div")[0].outerText = "<a>a</a>";
$("div")[0].innerHTML = "<a>a</a>";
$("div")[0].innerText = "<a>a</a>";

分别变成：

<body>
	<a>a</a>
</body>
---------------------
<body>
	&lt;a&gt;a&lt;/a&gt;
</body>
---------------------
<body>
	<div><a>a</a></div>
</body>
---------------------
<body>
	<div>&lt;a&gt;a&lt;/a&gt;</div>
</body>

也就是说，
outer和inner决定是不是包含最外层（当前）标签；
Text和HTML获取时决定是否把标签忽略，插入时决定是否把字符串解析为标签。

转载于:https://www.cnblogs.com/xuejianbest/p/10284948.html

weixin_34197488
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《前端》迷之解惑 outerHTML
BelleDiao的博客
06-10 354
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile..
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
DOM元素节点属性outerHTML和innerHTML
economics3的博客
04-24 435
前言 innerHTML是我们常用的一个修改某个元素内容的属性 outerHTML可能不太常用 两者有什么区别 假设一个多层级的节点入下面代码所示 <h2 id="注意事项"> <a href="#注意事项" title="Permalink to 注意事项">注意事项</a> </h2> 输入代码 document.querySelector('#注意事项').innerHTML '<a href="#注意事项" title="Permalink t
DOM中的outerHTML,innerHTML,outerText,innerText的区别
偏安的专栏
02-27 529
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：  1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
JS DOM innerHTML outerHTML - Kaiqisan
Kaiqisan的博客
08-25 195
JS DOM innerHTML outerHTML ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである，今天没有开场白，直接进入主题。 这个还是很好理解的innerHTML获取或设置当前节点内部的所有内容 <div claas="demo"> <p>apppp</p> </div> let a = document.getElementsByClassName('demo')[0] console.log(a.innerHTM
JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val() ？...
weixin_30304375的博客
06-01 566
一、JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？ 1、innerHTML 属性 （参考自《JavaScript高级程序设计》294页） 在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这...
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
01-19
innerText属性和outerText属性在读取元素节点的文本内容时，得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时，outerText属性会使得原来的元素节点被文本节点替换掉。注意，innerText是非标准属性，...
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
DOM中的innerHTML、innerText和outerHTML、outerText的区别
Quincylk的专栏
05-19 945
http://walsh.iteye.com/blog/261966       1、功能讲解: 　　innerHTML 设置或获取位于对象起始和结束标签内的 HTML 　　outerHTML 设置或获取对象及其内容的 HTML 形式 　　innerText 设置或获取位于对象起始和结束标签内的文本 　　outerText 设置(包括标签)或获取(不包括标签)对象的文本 　　2、
JavaScript-操作DOM对象-更新dom节点
qq_38959934的博客
08-11 247
更新dom节点 https://www.bilibili.com/video/BV1JJ41177di?p=21
innerHTML,innerText,outerHTML,outerText的使用方法
zisetoufa
04-24 124
innerHTML:设置或返回表格行的开始和结束标签之间的 HTML innerText:以字符串的形式输出开始和结束标签之间的 HTML outerHTML:输出包括HTML标签的内容 outerText:输出标签里的内容,不包括标签 function a() { alert(tdtd.outerHTML); } function b() { alert(tdtd...
HTML5权威指南——使用DOM对象
gyypwrs的博客
12-06 143
使用元素对象 使用以下的一组属性能够读取或者修改被代表的元素的数据，属性如下： 使用类 有两种方法来处理元素的类，className和classList className返回一个类的列表。使用举例如下： <!doctype html> <html> <head> <meta charset="utf-8"> <style> p { border: 2px solid black;
innerHTML、innerText、outerHTML、outerText的区别
Defonds 的专栏
03-03 3695
innerHTML、innerText、outerHTML、outerText的区别  书上是这样说的：innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本没有例子，你明白什么意思吗
outerText,innerText 区别说明
hqmln的博客
05-05 160
 首先，看我们的html定义     &lt;div id="diva"&gt;     &lt;div id="div1"&gt;      &lt;a&gt;innerHTML,innerText,outerHTML,outeterText&lt;/a&gt;      &lt;input type ="button"  onclick ="inner()
innerHTML、innerText和outerHTML、outerText的区别
weishigao的博客
03-07 279
innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而ou...
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
Karka_的博客
09-15 4546
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerHTML和outerHTML有什么区别
热门推荐
william_n的博客
04-24 2万+
就是用来了解innerHTML和outerHTML有什么区别。
深入理解JavaScript：DOM操作与属性探索
在"Javascript技术笔记2"中，主要涉及了JavaScript在操作DOM（文档对象模型）以及元素属性方面的一些关键知识点。以下是对这些内容的详细解释： 1. 查看document属性和方法 `for(i in document){ document.write(i...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值