js中innerText，innerHTML的用法
生活随笔
收集整理的這篇文章主要介紹了
js中innerText，innerHTML的用法
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
innerText，outerText，innerHTML，outerHTML
這次我們要使用另一些對象屬性對來實(shí)現(xiàn)動態(tài)改變文本，它們就是：innerText，outerText，innerHTML，outerHTML，千萬要注意它們的大小寫，因?yàn)殄e一點(diǎn)您就得不到預(yù)期的效果了。這是全新的方法，當(dāng)您掌握它以后將可隨心所欲的設(shè)計(jì)動態(tài)內(nèi)容了，不可錯過哦！
例12 動態(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">請點(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屬性用來定義對象所要輸出的文本，在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”（語句DT.innerText="我很好!"）。而對對象DH的改變用了innerHTML屬性，它除了有innerText的作用外，還可改變對象DH內(nèi)部的HTML語句，于是它把文本變成了“我姓肖!”，而且文本輸出改成了斜體（<i></i>）并下加一條直線（<u></u>），即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用，讀者不妨自己試試看。
下面我們來設(shè)計(jì)一個有趣的動態(tài)頁面。
例13 文本的動態(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為一對象。
else
{ Output.innerText="在此處輸出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p><font color="gray">請?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>
此例的動態(tài)效果如下，先在文本框中輸入文本，然后按“輸出文本”的按鈕，接著網(wǎng)頁便會自動輸出您所輸入的文本。
此外，我們還可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定對象能直接調(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>");
//第一個參數(shù)是用來指明位置，第二個參數(shù)是要插入的Html內(nèi)容。
}//function
</script>
</head>
<body>
<p><br>
</p>
<p id="New" οnclick="Insert()">點(diǎn)擊此行藍(lán)色文字將插入文本</p>
</body>
</html> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀
這次我們要使用另一些對象屬性對來實(shí)現(xiàn)動態(tài)改變文本，它們就是：innerText，outerText，innerHTML，outerHTML，千萬要注意它們的大小寫，因?yàn)殄e一點(diǎn)您就得不到預(yù)期的效果了。這是全新的方法，當(dāng)您掌握它以后將可隨心所欲的設(shè)計(jì)動態(tài)內(nèi)容了，不可錯過哦！
例12 動態(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">請點(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屬性用來定義對象所要輸出的文本，在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”（語句DT.innerText="我很好!"）。而對對象DH的改變用了innerHTML屬性，它除了有innerText的作用外，還可改變對象DH內(nèi)部的HTML語句，于是它把文本變成了“我姓肖!”，而且文本輸出改成了斜體（<i></i>）并下加一條直線（<u></u>），即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用，讀者不妨自己試試看。
下面我們來設(shè)計(jì)一個有趣的動態(tài)頁面。
例13 文本的動態(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為一對象。
else
{ Output.innerText="在此處輸出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p><font color="gray">請?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>
此例的動態(tài)效果如下，先在文本框中輸入文本，然后按“輸出文本”的按鈕，接著網(wǎng)頁便會自動輸出您所輸入的文本。
此外，我們還可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定對象能直接調(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>");
//第一個參數(shù)是用來指明位置，第二個參數(shù)是要插入的Html內(nèi)容。
}//function
</script>
</head>
<body>
<p><br>
</p>
<p id="New" οnclick="Insert()">點(diǎn)擊此行藍(lán)色文字將插入文本</p>
</body>
</html> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀
總結(jié)
以上是生活随笔為你收集整理的js中innerText，innerHTML的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript 判断 DOM 何时
- 下一篇： JavaScript中的nodeName