<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
<script language="JavaScript" type="text/javascript">
//.innerHTML
function innerHTMLDemo()
{
var b = test_id1;
alert("innerHTML="+b.innerHTML);
b.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
alert("innerHTML="+b.innerHTML);
}
//.innerText
function innerTextDemo()
{
alert("innerText="+test_id2.innerHTML);
test_id2.innerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
alert("innerText="+test_id2.innerHTML);
}
//.outerHTML
function outerHTMLDemo()
{
alert('outerHTML='+test_id3.outerHTML);
test_id3.outerHTML="<font id = 'test_idf' size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
alert('outerHTML='+test_idf.outerHTML);
}
//.outerText
function outerTextDemo()
{
alert("outerText="+test_id4.outerText);
test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
alert("outerText="+test_id4.outerText);
}
</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>
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
在示例中，我们可以看到，innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容，而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`...希望这些解释和示例能够帮助你更好地理解和运用 `innerHTML`、`innerText` 以及 `outerHTML` 这些重要的 DOM 属性。
在 JavaScript 中，innerHTML 和 innerText 是两个常用的属性，它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的，但它们在获取内容的方式和结果上有所不同。 innerHTML 属性 innerHTML 属性用于获取 ...
通过以上分析可以看出，`innerHTML`、`outerHTML` 和 `innerText` 三者在功能上存在显著的区别。选择合适的属性取决于具体的应用场景，例如是否需要保留HTML格式，还是仅关注纯文本内容等。理解这些差异对于有效地...
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的知识。 首先，让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。... test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 上例中的text.outerHTML的值也就是<div i
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，...
JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性，它们各有特点，适用场景也有所不同。以下是对这些属性的详细解释： 1. innerHTML属性： innerHTML属性...
outerText和outerHTML与innerText和innerHTML类似，但它们同时影响元素自身以及其内部内容。outerText会获取或设置一个元素及其所有后代的文本，而outerHTML则会获取或设置元素及其内容的完整HTML表示。 通过了解...