innerHTM,LouertHTML,innerText,outerText,nodeValue區別

來源:互聯網
上載者:User

標籤:dom   style   width   lan   元素   文檔   doctype   logs   val   

1.innerHTML
  寫入的標籤會被解析成元素
  oBox.innerHTML = "<strong>123</strong>";

   返回包括標籤在內的所有內容
   console.log(oBox.innerHTML); 

 


2.outerHTML 
  設定/修改包括自身元素在內的內容

 

  會解析標籤

 

 

3.innerText
  寫入的標籤不會被解析 當做文本插入
  oBox.innerText = "<strong>123</strong>";

  返回標籤中的常值內容(不包括標籤    
  console.log(oBox.innerText);
  只擷取其中文字文件;

4.outerText

  設定/修改包括自身元素在內的所有常值內容

  不會解析標籤

 

5.nodeValue
  不能直接操作某個dom元素,針對非元素節點設定值/傳回值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div id = "box">        div        <span>span</span>    </div></body></html>

 

 

 1.innerHTML

<script>    var oBox = document.getElementById("box");    oBox.innerHTML = "<p><strong>123</strong></p><p>456</p>";</script>    

 

 

 

 2.outerHtTML

<script>    var oBox = document.getElementById("box");        oBox.outerHTML = "<p><strong>123</strong></p><p>456</p>";</script>

 注意布局發生的改變

 

 

 3.innerText

<script>    var oBox = document.getElementById("box");        oBox.innerText = "<p><strong>123</strong></p><p>456</p>";    </script>

 

 

 4.outerText

<script>    var oBox = document.getElementById("box");    oBox.outerText = "<p><strong>123</strong></p><p>456</p>";    </script>

 

 

 

 5.nodeValue

只針對非元素節點進行操作 

對元素節點操作無效 可能會報undefined錯誤

<script>    var oBox = document.getElementById("box");        oBox.childNodes[0].nodeValue = "<p><strong>123</strong></p><p>456</p>"</script>

 

 

innerHTM,LouertHTML,innerText,outerText,nodeValue區別

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.