<menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    學校總部  | 設為首頁 | 加入收藏 | 官方微信
    內威培訓
    打造“培訓+就業”一站式服務品牌!
    banner1
    • Python+AI工程師
    • Web前端工程師
    • Java軟件開發工程師

    首頁>>學員天地

    innerText和innerHTML區別
    編輯:Simon  閱讀:2776次  發布:14-03-25
        盡管DOM帶來了動態修改文檔的能力,但對開發人員來說,這還不夠。IE4.0為所有的元素引入了兩個特性,以更方便的進行文檔操作,這兩個特性是innerText和innerHTML。

        其中innerText特性用來修改起始標簽和結束標簽之間的文本的。例如,假設有個空的<div/>元素,希望將其變成<div>New text for the div.</div>。
        用DOM實現時,要這么做:
        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/>.";
        這一行代碼的執行結果是<div>New text for the &lt;div/&gt;.</div>。

        但如何一定要在元素中包含HTML標簽呢?這就是innerHTML所要解決的問題。應用innerHTML特性,可以直接給元素分配HTML字符串,而不需考慮使用DOM方法來創建元素。例如,假設一個空<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來獲取元素的內容。如果元素只包含文本,那么innerText和innerHTML返回相同的值。但是如果同時包含文本和其他元素,innerText將只返回文本的表示,而innerHTML,將返回所有元素和文本的HTML代碼。下面的表格列出了根據特定代碼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標簽。
        oDiv.innerText = oDiv.innerText;

    上一篇: CSS實現文本兩端對齊效果   下一篇: 解決span float:right不能右對齊而是換行顯示
    返回列表
    網絡大專、自考本科,學歷輕松拿!
    ©2016-2020 上海內威職業技能培訓學校 版權所有
    普陀區武寧路1500號中樓2-3層(郵編:200062)
    咨詢:021-62434966  合作:021-13371929650  就業:021-62434966  傳真:  電郵:service@snetway.com
    《中華人民共和國電信與信息服務業務》經營許可證滬ICP備15002602號 
    <menu id="a2esi"><strong id="a2esi"></strong></menu>
  • <nav id="a2esi"></nav>
    本溪娱网棋牌