Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>innerText, textContent</title>
    <style>
        .container {
            border-collapse: collapse;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 10pt;
        }
        td { border: 1px solid gray; padding: 3px 6px; }
        thead { text-align: center; background-color: #eee; }
        tbody tr:nth-child(even) { background-color: #ffa2; }
        tbody td:nth-child(1) { text-align: center; }
        tbody td:nth-child(3) { color: #00fd; }
        tbody td:nth-child(2) div {
            width: 70px;
            white-space: nowrap;
            border: 1px solid gray;
        }
    </style>
</head>
​
<body>
    <table class="container">
        <thead>
            <tr>
                <td>No</td>
                <td style="width: 120px">Element</td>
                <td>td.innerHTML</td>
                <td>td.innerText</td>
                <td>td.textContent</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td><div style="overflow: hidden; text-overflow: ellipsis">Hello, World!</div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>2</td>
                <td><div  style="overflow: hidden">Hello, World!</div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td><div  style="overflow-x: scroll">Hello, World!</div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td><div  style="text-transform: uppercase">Hello, World!</div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td><div  style="display: none;">Hello, World!<script>console.log('Hi');</script></div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td><div>Hello,<br /> World!</div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td><div>Hello,<span style="display: none"> World!</span></div></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script>
        const formatHtml = html => {
            return html.replace(/(&lt;div.*?&gt;)/, '$1<div style="color:brown">')
                .replace(/(&lt;\/div&gt;)/, '</div>$1');
        };
        document.querySelectorAll('tbody tr').forEach(d => {
            const tds = [...d.querySelectorAll('td')];
            tds[2].textContent = tds[1].innerHTML;
            tds[2].innerHTML = formatHtml(tds[2].innerHTML);
            tds[3].innerHTML = `<pre>${tds[1].innerText}</pre>`;
            tds[4].innerHTML = `<pre>${tds[1].textContent}</pre>`;
        });
    </script>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers