javaScript中innerHTML,innerText,outerHTML,outerText的區別

本文轉載自查看原文 2017-09-02 15:14 14428 javascript

開頭說下innerText和outerText只在chrome瀏覽器中有效

定義和用法

innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML，包括標簽。

來看代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="div1">這是一個標簽div</div>
    <span id="span1">這是一個標簽span</span>
    <div id="div2">
        <span>div2里面的span1</span>
        <span>div2里面的span2</span>
    </div>
    <script>
        var div1 = document.getElementById("div1").innerHTML; var span1 = document.getElementById("span1").innerHTML; var div2 = document.getElementById("div2").innerHTML;
        console.log(div1);
        console.log(span1);
        console.log(div2);
    </script>
</body>

</html>

我定義了三個標簽，然后用console打印出來

可以看出如果如果當前標簽只有文字，那innerHTML只會輸出文字

如果還有子標簽存在，則會將子標簽以及標簽內的文字一起輸出，這點一定要切記

這個時候你可以用replace方法來將標簽去除

只獲得文本內容

document.getElementById('div2').innerHTML.replace(/<.+?>/gim,''));

如上，span標簽已經沒有了，只剩下里面的文本內容

定義和用法

innerText 屬性設置或返回表格行的開始和結束標簽之間的 HTML內容，不包括Html標簽。

我們看代碼

<body>
    <div id="div1">這是一個標簽div</div>
    <span id="span1">這是一個標簽span</span>
    <div id="div2">
        <span>div2里面的span1</span>
        <span>div2里面的span2</span>
        <img src="" alt="">
    </div>
    <script>
        var div1 = document.getElementById("div1").innerText; var span1 = document.getElementById("span1").innerText; var div2 = document.getElementById("div2").innerText;
        console.log(div1);
        console.log(span1);
        console.log(div2);
        
    </script>
</body>

打印出來的結果

從結果可以看到不管是當前標簽還是子標簽都只輸出文本內容

定義和用法

outerHTML 設置或獲取對象及其內容的HTML形式，也就是標簽和文本內容全都顯示出來

我們看代碼

<body>
    <div id="div1">這是一個標簽div</div>
    <span id="span1">這是一個標簽span</span>
    <div id="div2">
        <span>div2里面的span1</span>
        <span>div2里面的span2</span>
        <img src="" alt="">
    </div>
    <script>
        var div1 = document.getElementById("div1").outerHTML;
        var span1 = document.getElementById("span1").outerHTML;
        var div2 = document.getElementById("div2").outerHTML;
        console.log(div1);
        console.log(span1);
        console.log(div2);
    </script>
</body>

我們看控制台的打印結果

有意思吧

outerHTML是把當前標簽的全部內容包括標簽本身也全部取出來了

定義和用法

outerText 設置或獲取對象及其內容的HTML形式，也就是標簽和文本內容全都顯示出來

我們來看代碼

<body>
    <div id="div1">這是一個標簽div</div>
    <span id="span1">這是一個標簽span</span>
    <div id="div2">
        你好世界
        <span>div2里面的span1</span>
        <span>div2里面的span2</span>
        <img src="" alt="">
    </div>
    <script>
        var div1 = document.getElementById("div1").outerText; var span1 = document.getElementById("span1").outerText; var div2 = document.getElementById("div2").outerText;
        console.log(div1);
        console.log(span1);
        console.log(div2);
    </script>
</body>

看console打印的結果

很顯然，outerText是把當前標簽的內容給輸出了，如果有子標簽，也會把子標簽的內容也一起輸出了

那好，經過這么一比較，我們就可以得出結論了

innerHTML 輸出當前標簽的文本內容，如果標簽內有子標簽，會連子標簽本身和子標簽內的文本內容一起輸出

innerText 只輸出當前標簽內的文本內容，如果標簽內有子標簽，那么也只輸出子標簽內的文本內容

outerHTML 輸出當前標簽的本身和標簽內的文本內容，如果有子標簽，那么子標簽本身和標簽內的文本內容也將一起輸出

outerText 只輸出當前標簽內的文本內容，如果標簽內有子標簽，那么也只輸出子標簽內的文本內容

那么outerText和innerText的區別到底在哪呢？同樣是只輸出文本內容，這兩個屬性在讀數據的時候是完全一樣的，可能在寫數據的時候不一樣？

下次寫jq的html(),text(),val()記錄時候更新一下

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 DOM中的outerHTML,innerHTML,outerText,innerText的區別 JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jQuery中的text()、html()和val() ？ JavaScript中innerText和innerHTML的區別 JS之innerHTML，innerText，outerHTML，textContent的用法與區別 JavaScript中innerHTML與innerText，createTextNode的區別 innerHTML和outerHTML有什么區別 innerHTML和outerHTML區別 js中innerHTML與innerText的用法與區別 js中innerHTML 和 innerText 獲取內容的區別 innerHTML和innerText的區別