innerText, innerHTML, textContentの違い

イオリ

The Web Developer Bootcamp 2022の246にて。

MDNによると


Differences from innerText

Don't get confused by the differences between Node.textContent and HTMLElement.innerText. Although the names seem similar, there are important differences:

  • textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows "human-readable" elements.

  • textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.

    • Moreover, since innerText takes CSS styles into account, reading the value of innerText triggers a reflow to ensure up-to-date computed styles. (Reflows can be computationally expensive, and thus should be avoided when possible.)

  • Both textContent and innerText remove child nodes when altered, but altering innerText in Internet Explorer (version 11 and below) also permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element after doing so.

Differences from innerHTML

Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.

Moreover, using textContent can prevent XSS attacks.



コード。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #divA span {
            color: aqua;
        }
    </style>
</head>
<body>
    <!-- 246~ -->

<div id="divA">This is <span>some</span> text!</div>


<div id="divB">This is <span>some</span> text!
    This is <span>some</span> text!
    This is <span>some</span> text!
    This is <span>some</span> text!
</div>




    <script src="246-.js"></script>
</body>
</html>

JavaScript

// https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent



let textA = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'

let textB = document.getElementById('divB');



textA.innerText = 'This text is different!';
// The HTML for divA is now:
// <div id="divA">This text is different!</div>


// そのまま表示
textA.innerText = '<b>This text is different!</b>';

// 理解してくれる
textA.innerHTML = '<b>This text<span> is</span> different!</b>';

// そのまま表示
textA.textContent = '<b>This text<span> is</span> different!</b>';

それぞれで新しいテキストをつくると

innerText　そのまま表示

innerHTML　理解してくれる

textContent　そのまま表示


つまり

// そのまま表示
textA.innerText = '<b>This text is different!</b>';

// これだけタグが表示されない
textA.innerHTML = '<b>This text<span> is</span> different!</b>';

// そのまま表示
textA.textContent = '<b>This text<span> is</span> different!</b>';


consoleで表示すると


innerText　　human readableな普通の文章

innerHTML　改行やスペース、タグも表示

textContent　タグは表示せず、改行とスペースを表示


この記事が気に入ったらサポートをしてみませんか？