其中innerText特性用來修改起始標(biāo)簽和結(jié)束標(biāo)簽之間的文本的。例如，假設(shè)有個(gè)空的<div/>元素，希望將其變成<div>New text for the div.</div>。用DOM實(shí)現(xiàn)時(shí)，要這么做：
oDiv.appendChild(document.createTextNode("New text for the div."));
這段代碼并不難讀，但是很冗長(zhǎng)。如果使用innerText,只要這么做：
oDiv.innerText = "New text for the div.";
使用innerText,代碼更加簡(jiǎn)潔，并且更容易理解。另外，innerText會(huì)自動(dòng)將小于號(hào)、大于號(hào)、引號(hào)和&符號(hào)進(jìn)行HTML編碼，所有是毫不需當(dāng)心特殊字符：
oDiv.innerText = "New text for the <div/>.";
這一行代碼的執(zhí)行結(jié)果是<div>New text for the &lt;div/&gt;.</div>。但如何一定要再元素中包含HTML標(biāo)簽?zāi)?？這就是innerHTML所要解決的問題。
應(yīng)用innerHTML特性，可以直接給元素分配HTML字符串，而不需考慮使用DOM方法來創(chuàng)建元素。例如，假設(shè)一個(gè)空<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返回相同的值。但是，如果同時(shí)包含文本和其他元素，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>"

后，通過將innerText賦值給它自身，表示從指定的元素中刪除所有的HTML標(biāo)簽。
oDiv.innerText = oDiv.innerText;

最新評(píng)論