innerText和innerHTML 一些問題分析
更新時間:2009年05月18日 00:24:46 作者:
盡管DOM帶來了動態(tài)修改文檔的能力,但對開發(fā)人員來說,這還不夠。IE4.0為所有的元素引入了兩個特性,以更方便的進行文檔操作,這兩個特性是innerText和innerHTML。
其中innerText特性用來修改起始標簽和結(jié)束標簽之間的文本的。例如,假設(shè)有個空的<div/>元素,希望將其變成<div>New text for the div.</div>。用DOM實現(xiàn)時,要這么做:
oDiv.appendChild(document.createTextNode("New text for the div."));
這段代碼并不難讀,但是很冗長。如果使用innerText,只要這么做:
oDiv.innerText = "New text for the div.";
使用innerText,代碼更加簡潔,并且更容易理解。另外,innerText會自動將小于號、大于號、引號和&符號進行HTML編碼,所有是毫不需當心特殊字符:
oDiv.innerText = "New text for the <div/>.";
這一行代碼的執(zhí)行結(jié)果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML標簽?zāi)??這就是innerHTML所要解決的問題。
應(yīng)用innerHTML特性,可以直接給元素分配HTML字符串,而不需考慮使用DOM方法來創(chuàng)建元素。例如,假設(shè)一個空<div/>要變成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代碼:
var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement("em");
oEm.appendChild(document.createTextNode("World"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(""));
oDiv.appendChild(oEm);
而使用innerHTML,代碼就變成:
oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
七行代碼一下就變成一行,這就是innerHML的威力!
還可以使用innerText和innerHTML來獲取元素的內(nèi)容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是,如果同時包含文本和其他元素,innerText將只返回文本的表示,而innerHTML,將返回所有元素和文本的HTML代碼。下面的表格列出了根據(jù)特定代碼innerText和innerHTML返回的不同值。
后,通過將innerText賦值給它自身,表示從指定的元素中刪除所有的HTML標簽。
oDiv.innerText = oDiv.innerText;
oDiv.appendChild(document.createTextNode("New text for the div."));
這段代碼并不難讀,但是很冗長。如果使用innerText,只要這么做:
oDiv.innerText = "New text for the div.";
使用innerText,代碼更加簡潔,并且更容易理解。另外,innerText會自動將小于號、大于號、引號和&符號進行HTML編碼,所有是毫不需當心特殊字符:
oDiv.innerText = "New text for the <div/>.";
這一行代碼的執(zhí)行結(jié)果是<div>New text for the <div/>.</div>。但如何一定要再元素中包含HTML標簽?zāi)??這就是innerHTML所要解決的問題。
應(yīng)用innerHTML特性,可以直接給元素分配HTML字符串,而不需考慮使用DOM方法來創(chuàng)建元素。例如,假設(shè)一個空<div/>要變成<div><strong>Hello</strong><em>World</em></div>。使用DOM,要用下面的代碼:
var oStrong = document.createElement("strong');
oStrong.appendChild(document.createTextNode("hello"));
var oEm = document.createElement("em");
oEm.appendChild(document.createTextNode("World"));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(""));
oDiv.appendChild(oEm);
而使用innerHTML,代碼就變成:
oDiv.innerHTML = "<strong>Hello</strong><em>World</em>";
七行代碼一下就變成一行,這就是innerHML的威力!
還可以使用innerText和innerHTML來獲取元素的內(nèi)容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是,如果同時包含文本和其他元素,innerText將只返回文本的表示,而innerHTML,將返回所有元素和文本的HTML代碼。下面的表格列出了根據(jù)特定代碼innerText和innerHTML返回的不同值。
代碼 | innerText | innerHTML |
<div>Hello world</div> | "Hello world" | "Hello world" |
<div><b>Hello</b>world</div> | "Hello world" | "<b>Hello</b>world" |
<div><span></span></div> | "" | "<span></span>" |
oDiv.innerText = oDiv.innerText;
相關(guān)文章
javascript實現(xiàn)拖動層效果代碼(符合標準且兼容IE,chrome,firefox)
javascript實現(xiàn)拖動層,原理很簡單,就是根據(jù)鼠標的位置實時設(shè)置層的left和top2013-06-06JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法分析
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)純函數(shù)用法,結(jié)合實例形式分析了javascript函數(shù)式編程中純函數(shù)的函數(shù)依賴、所指透明等概念相關(guān)原理及使用技巧,需要的朋友可以參考下2019-05-05js當一個變量為函數(shù)時 應(yīng)該注意的一點細節(jié)小結(jié)
變量testFun為一個匿名函數(shù),匿名函數(shù)返回的一個testFun.init對象(也是一個匿名函數(shù))2011-12-12