Sallu Codes

Difference between innerHTML, innerText, textContent, outerHTML, value

Muhammad Salman Ali's photo
Muhammad Salman Ali
·

1 min read

innerHTML : Prints the inner elements

innerText : Doesn't prints the tags , picks up the text. Does not considers white spaces

textContent : Quite similar to inner Text. It shows hidden content

outerHTML : picks up whole content including outer tags and inner tags

value : prints the value of the respective id

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


<body>

 <div id = "test">
     Warning: This <b>element</b> contains <code>code</code> and <strong>strong language</strong>

 <input id = "abc" value = "123" >
 </div>

  <script>

   var x = document.getElementById('test');
   var z = document.getElementById('abc');
   console.log(x.innerHTML);
   console.log(x.innerText);
   console.log(x.textContent);
   console.log(x.outerHTML);
   console.log(z.value);


  </script>

</body>

</html>

image.png

HTML5JavaScriptjs