图例分析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" onclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>
- 大小: 9.1 KB
分享到：
相关推荐
.innerHTM、outerHTML、innerText、outerText的用法与区别 .innerHTML、outerHTML、innerText、outerText是HTML文档对象模型（DOM）中四个常用的属性，它们都是用来操作HTML元素的内容的，但它们之间有着很大的区别...
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键，用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
在实际开发中，`innerHTML` 和 `outerHTML` 经常结合DOM操作一起使用，以实现动态网页内容的创建和更新。然而，需要注意的是，频繁使用这两个属性可能会对性能造成影响，因为它们会重新解析和渲染整个HTML片段。因此...
然而，与大部分现代浏览器的良好兼容性不同，Firefox在过去（尤其是在较旧的版本中）对`outerHTML`的支持并不完全。标题"解决Firefox下outerHTML不支持问题"提示我们关注的是如何在Firefox中使用或模拟这个功能。 ...
例如，`myDiv.outerHTML = "<span>New Content</span>"`将替换掉`<div>`为一个新的`<span>`元素。 - 示例：`document.getElementById("test_id3").outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>...
在某些情况下，如果我们尝试设置 `outerHTML` 为一个空字符串，IE浏览器可能会遇到一些未预期的行为。 在题目描述中提到的问题中，创建了一个遮盖层（div）并在用户点击关闭时使用 `innerHTML` 或 `outerHTML` 清除...
- 虽然可以使用`prop("outerHTML")`获取和设置outerHTML，但这并不是jQuery推荐的做法，因为它直接操作了元素的outerHTML属性，有时候可能会带来不可预见的问题，特别是在复杂的DOM操作中。 - 在使用jQuery进行DOM...
在原生JavaScript中可以通过使用`outerHTML`属性来实现这一点，但在早期的jQuery API文档中，并没有直接提供类似的方法来获取元素的`outerHTML`。 从内容中可以看到，社区中的开发者经过实验发现，可以通过jQuery的...
在Web开发中，尤其是涉及到DOM（Document Object Model）操作时，`innerHTML`和`outerHTML`是两个非常关键的属性。`innerHTML`用于获取或设置一个元素内部的HTML内容，而不包括元素自身。相反，`outerHTML`则包含了...
本文主要讨论的是如何解决Firefox浏览器不支持`outerHTML`属性的问题。`outerHTML`是Internet Explorer（IE）特有的一个属性，它允许开发者获取或设置一个元素及其所有子元素的HTML表示形式。然而，Firefox和其他...
它还介绍了对.outerHTML(function)的支持。 有关更多详细信息，请参见版本说明。 检查“示例”文件夹中的一些工作示例。 使用.outerHTML()获取HTMLString 获取第一个元素HTML及其在匹配元素集中的内容。 var ...
### innerHTML，outerHTML,innerTEXT三者之间的区别 在前端开发中，处理DOM（文档对象模型）元素时，我们经常需要操作元素的内容或者结构。`innerHTML`、`outerHTML` 和 `innerText` 这三个属性是JavaScript中最...
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
javascript:s=document.documentElement.outerHTML;document.write('<body></body>');document.body.innerText=s; ``` 1. **第一步**：`javascript:` 是告诉浏览器这是一个JavaScript脚本，可以直接执行。 2. **第...