innerText，outerText，innerHTML，outerHTML区别
document.body.innerHTML；
innerText，outerText，innerHTML，outerHTML資料outerHTML：標(biāo)簽對(duì)象外部的HTML文本(包括該標(biāo)簽)??
innerHTML：標(biāo)簽對(duì)象內(nèi)部的HTML文本(不包括該標(biāo)簽)??innerText:?標(biāo)簽對(duì)象內(nèi)部的普通文本??
outerText:?好像功能和innerText相似??
1、動(dòng)態(tài)改變文本??
使用innerText，outerText，innerHTML，outerHTML來實(shí)現(xiàn)動(dòng)態(tài)改變文本，千萬要注意它們的大小寫，因?yàn)殄e(cuò)一點(diǎn)您就得不到預(yù)期的效果了。這是全新的方法，當(dāng)您掌握它以后將可隨心所欲的設(shè)計(jì)動(dòng)態(tài)內(nèi)容了，不可錯(cuò)過哦！??
例12?動(dòng)態(tài)改變文本和Html??
<html>??
<head>??
<title>DHtml舉例12</title>??
<style><!--??
body?{font-family:"宋體";color="blue";font-size="9pt"}??
-->??
</style>??
<script?language="JavaScript">??
function?changeText()??
{??
DT.innerText="我很好!";??
}//function??
function?changeHtml()??
{??
DH.innerHTML="<i><u>我姓肖!</u></i>";??
}//function??
function?back()??
{??
DT.innerText="您好嗎?";??
DH.innerHTML="您姓什么?";??
}??
</script>??
</head>??
<body>??
<p><font?color="gray">請(qǐng)點(diǎn)擊下邊的文字……</font>??
<ul>??
<li?id="DT"?οnclick="changeText()">您好嗎??</li>??
<li?id="DH"?οnclick="changeHtml()">您姓什么??</li>??
<li?οnclick="back()">恢復(fù)原樣!?</li>??
</ul>??
</body>??
</html>??
innerText屬性用來定義對(duì)象所要輸出的文本，在本例中innerText把對(duì)象DT中的文本“您好嗎?”變成了“我很好!”（語句DT.innerText="我很好!"）。而對(duì)對(duì)象DH的改變用了innerHTML屬性，它除了有innerText的作用外，還可改變對(duì)象DH內(nèi)部的HTML語句，于是它把文本變成了“我姓肖!”，而且文本輸出改成了斜體（<i></i>）并下加一條直線（<u></u>），即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用，讀者不妨自己試試看。??
下面我們來設(shè)計(jì)一個(gè)有趣的動(dòng)態(tài)頁(yè)面。??
例13?文本的動(dòng)態(tài)輸入與輸出??
<html>??
<head>??
<title>DHtml舉例13</title>??
<style><!--??
body?{font-family:"宋體";color="blue";font-size:"9pt"}??
.blue?{color:blue;font-size:9pt}??
-->??
</style>??
<script?language="JavaScript">??
function?OutputText()??
{??
if(frm.txt.text!="")??
{?Output.innerHTML="在此處輸出文本：<u>"+frm.txt.value+"</u>";}?//Output為一對(duì)象。??
else??
{?Output.innerText="在此處輸出文本：";}??
}//function??
</script>??
</head>??
<body>??
<p><br></p>??
<form?name="frm">??
<p><font?color="gray">請(qǐng)?jiān)谖谋究蛑休斎胛淖?</font>??
<input?type="text"?name="txt"?size="50"><br>??
<input?type="button"?value="輸出文本"?name="B1"?class="blue"?οnclick="OutputText()"></p>??
</form>??
<p?id="Output">在此處輸出文本：</p>??
</body>??
</html>??
此例的動(dòng)態(tài)效果如下，先在文本框中輸入文本，然后按“輸出文本”的按鈕，接著網(wǎng)頁(yè)便會(huì)自動(dòng)輸出您所輸入的文本。??
此外，我們還可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定對(duì)象能直接調(diào)用的函數(shù)）在先前文本或Html內(nèi)容的前邊或后邊插入新的文本或Html內(nèi)容，使用這些方法需要參數(shù)，這些參數(shù)有：BeforeBegin、?AfterBegin、?BeforeEnd和AfterEnd，它們是用來標(biāo)明文本或Html插入的地方。具體用法如下例：??
例14?使用insertAdjacentHTML插入文本??
<html>??
<head>??
<title>DHtml舉例14</title>??
<style><!--??
body?{font-family:"宋體";color="blue";font-size:"9pt"}??
-->??
</style>??
<script?language="JavaScript">??
function?Insert()??
{??
document.all.New.insertAdjacentHTML("AfterBegin","<font?color=red>-新插入的內(nèi)容-<font>");??
//第一個(gè)參數(shù)是用來指明位置，第二個(gè)參數(shù)是要插入的Html內(nèi)容。??
}//function??
</script>??
</head>??
<body>??
<p><br>??
</p>??
<p?id="New"?οnclick="Insert()">點(diǎn)擊此行藍(lán)色文字將插入文本</p>??
</body>??
</html>??
總結(jié)
以上是生活随笔為你收集整理的innerText，outerText，innerHTML，outerHTML区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 像素间的关系
- 下一篇： enkey java_近期的Java项目