innerText,outerText,innerHTML,outerHTML區別

document.body.innerHTML;

innerText,outerText,innerHTML,outerHTML資料outerHTML:標簽對象外部的HTML文本(包括該標簽)??

innerHTML:標簽對象內部的HTML文本(不包括該標簽)??
innerText:?標簽對象內部的普通文本??

outerText:?好像功能和innerText相似??

1、動態改變文本??
使用innerText,outerText,innerHTML,outerHTML來實現動態改變文本,千萬要注意它們的大小寫,因為錯一點您就得不到預期的效果了。這是全新的方法,當您掌握它以后將可隨心所欲的設計動態內容了,不可錯過哦!??

例12?動態改變文本和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">請點擊下邊的文字……</font>??
<ul>??
<li?id="DT"?οnclick="changeText()">您好嗎??</li>??
<li?id="DH"?οnclick="changeHtml()">您姓什么??</li>??
<li?οnclick="back()">恢復原樣!?</li>??
</ul>??
</body>??
</html>??

innerText屬性用來定義對象所要輸出的文本,在本例中innerText把對象DT中的文本“您好嗎?”變成了“我很好!”(語句DT.innerText="我很好!")。而對對象DH的改變用了innerHTML屬性,它除了有innerText的作用外,還可改變對象DH內部的HTML語句,于是它把文本變成了“我姓肖!”,而且文本輸出改成了斜體(<i></i>)并下加一條直線(<u></u>),即語句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有類似的作用,讀者不妨自己試試看。??


下面我們來設計一個有趣的動態頁面。??

例13?文本的動態輸入與輸出??
<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">請在文本框中輸入文字:</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>??

此例的動態效果如下,先在文本框中輸入文本,然后按“輸出文本”的按鈕,接著網頁便會自動輸出您所輸入的文本。??

此外,我們還可使用insertAdjacentHTML和insertAdjacentText方法(方法即是某特定對象能直接調用的函數)在先前文本或Html內容的前邊或后邊插入新的文本或Html內容,使用這些方法需要參數,這些參數有:BeforeBegin、?AfterBegin、?BeforeEnd和AfterEnd,它們是用來標明文本或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>-新插入的內容-<font>");??
//第一個參數是用來指明位置,第二個參數是要插入的Html內容。??
}//function??
</script>??
</head>??
<body>??
<p><br>??
</p>??
<p?id="New"?οnclick="Insert()">點擊此行藍色文字將插入文本</p>??
</body>??
</html>??

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/273318.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/273318.shtml
英文地址,請注明出處:http://en.pswp.cn/news/273318.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ubuntu安裝adobe字體

Ubuntu的字體目錄存放在/usr/share/fonts目錄下&#xff0c;可以看到該目錄下有4個目錄&#xff0c; 12$ ls /usr/share/fonts/cmap truetype type1 X11我們在truetype目錄下新建一個adobe的目錄來存放需要安裝的Adobe中文字體&#xff0c;并把已經下載好的字體復制到該目錄…

Spring Thread Pool 線程池的應用

Spring and Java Thread example 掃掃關注“茶爸爸”微信公眾號堅持最初的執著&#xff0c;從不曾有半點懈怠&#xff0c;為優秀而努力&#xff0c;為證明自己而活。Download it – Spring-Thread-Example.zip (22 KB)轉自&#xff1a;http://www.mkyong.com/spring/spring-and…

數據庫操作類型簡介

SQL語言大體上可以分為四大類&#xff1a; 數據查詢語言&#xff08;DQL&#xff09;&#xff0c;數據操縱語言&#xff08;DML&#xff09;&#xff0c;數據定義語言&#xff08;DDL&#xff09;&#xff0c;數據控制語言&#xff08;DCL&#xff09;。 1. 數據查詢語言DQL數…

Emule使用Upnp,解決Lowid和port not reachable的問題

路由器上鉤選開啟Upnp Emule->選擇->擴展選項->Upnp&#xff0c; 服務器&#xff1a;【從URL更新】http://upd.emule-security.org/server.met轉載于:https://www.cnblogs.com/zhyong/p/4422139.html

Longest Palindromic Substring

Given a string S, find the longest palindromic substring in S. You may assume that the maximum length of S is 1000, and there exists one unique longest palindromic substring. 題目描述很簡單&#xff0c;就是尋找一個字符串的最大回文。 1.暴力搜索 窮舉所有的可能…

Integer 中的緩存類IntegerCache

2014年去某公司筆試的時候遇到這么一道題&#xff1a; public class Test {public static void main(String[] args) {Integer int1 Integer.valueOf("100");Integer int2 Integer.valueOf("100");System.out.println(int1 int2);} } 問打印的結果的多少…

Android動畫及滑動事件沖突解決(轉載)

原文鏈接&#xff1a;http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android開發中動畫和事件處理是程序員邁向高手的必經之路&#xff0c;也是重點和難點。 此篇轉載文章思路清晰&#xff0c;結構合理&#xff0c;用圖文混合的方式完美的講解了動畫和事件沖突…

在main函數前后執行的函數之 C語言

在gcc中&#xff0c;可以使用attribute關鍵字&#xff0c;聲明constructor和destructor&#xff0c;來指定了函數在main之前或之后運行,代碼如下&#xff1a; 1 #include <stdio.h>2 3 __attribute((constructor)) void before_main()4 {5 printf("%s/n",_…

VSTO開發,轉帖

http://www.cnblogs.com/oneivan/p/4243574.html轉載于:https://www.cnblogs.com/xianerwonder/p/4432595.html

PowerDesigner的漢化破解安裝到逆向工程(ORACLE)

一、軟件安裝 1、下載軟件并安裝安裝16.5漢化版下載地址&#xff1a;真正的漢化-PowerDesigner 16.5 漢化&#xff08;包含安裝文件和漢化文件&#xff09; 破解包下載地址&#xff1a;PowerDesigner V16.5 安裝文件 及 破解文件 &#xff08;包含安裝文件和破解文件&#xff0…

JAVA開發隨記

想到一點寫一點&#xff0c;遇到一點補充一點。 1、成員變量 在定義成員變量時盡量不要直接賦值&#xff0c;最好是在初始化信息的時候進行賦值操作。如果需要在屬性定義的時候進行賦值&#xff0c;那么請用final修飾該屬性。錯誤實例 class A extends B {/** 到期日距離當前…

PHP反射ReflectionClass、ReflectionMethod 入門教程

PHP反射ReflectionClass、ReflectionMethod 入門教程 作者&#xff1a;SNSGOU 發布于&#xff1a;2014-03-16 16:44:00 分類&#xff1a;PHP 瀏覽(6145) PHP5 具有完整的反射API&#xff0c;添加對類、接口、函數、方法和擴展進行反向工程的能力。 反射是什么&#xff…

Oracle開發常用知識

一、利用游標實現循環嵌套 在對oracle數據進行操作時我們會經常碰到循環甚至循環嵌套的情況。這個時候游標的作用就體現出來了。 DECLAREvId NUMBER(19);vDate DATE;--a表游標定義CURSOR a_cursor ISSELECT DISTINCT o.employeeId FROM operations o WHERE o.employeeId IS N…

條件控制(if ) ( case)

一&#xff1a;IF應用格式 (1)                  (2)                (3) IF 條件 THEN           IF 條件 THEN            IF 條件1 THEN --代碼塊               --代碼塊          …

使用臨時表解決union和order by不能同時使用的問題

最近遇見了這樣一個問題&#xff0c;有4張表&#xff0c;A&#xff08;單據&#xff09;表&#xff0c;B&#xff08;產品&#xff09;表&#xff0c;C&#xff08;產品類型&#xff09;&#xff0c;D&#xff08;單據產品關聯表&#xff09;。 B表有唯一對應的類型C&#xff…

2.3線性表的鏈式存儲和運算—雙向鏈表

以上討論的單鏈表的結點中只有一個指向其后繼結點的指針域next&#xff0c;因此若已知某結點的指針為p&#xff0c;其后繼結點的指針則為p->next &#xff0c;而找其前驅則只能從該鏈表的頭指針開始&#xff0c;順著各結點的next 域進行&#xff0c;也就是說找后繼的時間性能…

Oracle常用字符串操作

參考&#xff1a; 一、oracle操作字符串&#xff1a;拼接、替換、截取、查找&#xff1b; 二、oracle中的trim函數使用介紹 --字符串去空格 --輸出:a b c; SELECT TRIM( a b c ) || ; FROM dual; SELECT TRIM(BOTH FROM a b c ) || ; FROM dual; --輸出: a …

linux下面安裝maven

maven作為最近比較火的項目管理工具&#xff0c;對項目的jar包及其開元添加相應的插件的管理&#xff0c;很方便。 安裝maven&#xff1a; 在官網上面去下載最新的maven的壓縮包&#xff0c;apache-maven-3.3.1-bin.tar.gz. 將下載的壓縮包保存/usr/local/maven下&#xff0c;進…

Hibernate懶加載問題

剛開始接觸這種數據持久化框架時&#xff0c;使用的是Maybatis&#xff0c;相較于最原始的JDBCSQL模式&#xff0c;Maybatis簡直就是神器&#xff0c;特別是在用過Maybatis動態SQL后&#xff0c;簡直就開始對Maybatis愛不釋手。后來工作要求&#xff0c;又接觸到了Hibernate&am…

實現點擊按鈕后,倒計時60秒才能再次點擊

轉載于:https://www.cnblogs.com/liu201312/p/4447710.html