Comparaison des différences entre value&innerHTML&innerText&textContent dans js-tutoriel HTML-php.cn

Comparaison des différences entre value&innerHTML&innerText&textContent dans js

不言

Libérer： 2018-08-24 09:43:50

original

2113 Les gens l'ont consulté

Le contenu de cet article porte sur la différence et la comparaison entre value&innerHTML&innerText&textContent dans js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. valeur : appliquée à la zone de saisie du formulaire (sauf zone de texte)

2. innerHTML : le code HTML peut être écrit, et le code HTML écrit peut être écrit. être analysé, vous pouvez également obtenir le code HTML lors de son obtention

3. innerText : lors de l'obtention du contenu, le code HTML sera ignoré et le code HTML écrit ne pourra pas être analysé. Le contenu obtenu est le même que le contenu analysé par HTML

4. textContent : Lors de l'obtention du contenu, le code HTML sera ignoré et le code HTML écrit ne pourra pas être analysé. Le contenu obtenu est le même que le contenu du code source

 <!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>

Copier après la connexion

Recommandations associées :

Comment js détermine-t-il si le navigateur est PC ou mobile ? (Deux méthodes)

Solution indiquée par ceci dans la fermeture js (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!