Comparison of the differences between value&innerHTML&innerText&textContent in js-HTML Tutorial-php.cn

Comparison of the differences between value&innerHTML&innerText&textContent in js

不言

Release： 2018-08-24 09:43:50

Original

2112 people have browsed it

The content of this article is about the difference and comparison between value&innerHTML&innerText&textContent in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. value: applied to the input box of the form (except textarea)

2. innerHTML: HTML code can be written, and the written HTML code can be parsed , you can also get the HTML code when getting it

3. innerText: When getting the content, the HTML code will be ignored, and the written HTML code cannot be parsed. The obtained content is the same as the content parsed by HTML

4. textContent: When obtaining the content, the HTML code will be ignored, and the written HTML code cannot be parsed. The obtained content is the same as the source code content

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>修改元素的文本</title>
        <style type="text/css">
            div{
                            width:300px;                
                            height:300px;                
                            float:left;                
                            border:1px solid blue;                
                            margin-left:50px;            
                    
                      }
        </style>
    </head>
    <body>
        <div><p>i love you</p></div>
        <div></div>
        <div></div>
        <div></div>
        <div>
            <p>J                 
            哥                 最    帅</p>
            <a href="http://www.xxoo.com">xx                oo</a>
        </div>
        <div></div>

        <script type="text/javascript">
        var divs=document.getElementsByTagName(&#39;div&#39;);        /*
            value :应用于表单的输入框---textarea
            innerHTML：与后两者的区别，可以写入html代码会被解析，并且可以获得html代码
            innerText:获得内容的时候，都会忽略html代码
            textContent:获得内容的时候，都会忽略html代码
        */
        //读取内容
        console.log(divs[0].innerHTML);
        console.log(divs[0].innerText);
        console.log(divs[0].textContent);        //写入内容
        divs[1].innerHTML=&#39;<p>i miss you</p>&#39;;
        divs[2].innerText=&#39;<p>i miss you</p>&#39;;
        divs[3].textContent=&#39;<p>i miss you</p>&#39;;        /*
            比较innerText和textContent的区别 
                innerText 获取的内容和html解析的内容一样
                textContent获取的内容与源代码的内容一样
        */
        console.log(&#39;%c&#39;+divs[4].innerText,&#39;color:red;&#39;);
        console.log(divs[4].textContent);        var str="<p>哥                 最    帅</p> 
        <a href=&#39;http://www.xxoo.com&#39;>xx                oo</a>";        // divs[5].innerText=str;
        // divs[5].textContent=str;

        </script>
    </body>
    </html>

Copy after login

Related recommendations:

How does js determine whether the browser is PC or mobile? (Two methods)

The solution pointed to by this in the js closure (code)

The above is the detailed content of Comparison of the differences between value&innerHTML&innerText&textContent in js. For more information, please follow other related articles on the PHP Chinese website!