|
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標簽呢?這就是innerHTML所要解決的問題。
應用innerHTML特性,可以直接給元素分配HTML字符串,而不需考慮使用DOM方法來創(chuàng)建元素。例如,假設一個空<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;
JavaScript技術(shù):innerText和innerHTML 一些問題分析,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。