Skip to content

Instantly share code, notes, and snippets.

@Singhak

Singhak/index.html

Created December 28, 2023 17:25
Show Gist options
  • Save Singhak/182b1b714c3613983c5b332885273a32 to your computer and use it in GitHub Desktop.
Save Singhak/182b1b714c3613983c5b332885273a32 to your computer and use it in GitHub Desktop.
Download ZIP
innertext vs innerhtml vs textcontent
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="innertext"></div>
<div id="innerhtml"></div>
<div id="textcontent"></div>
<br>
<div id="innertext_v"> I am innertext <span hidden>Do't hide me</span><strong>BOLD</strong></div>
<div id="innerhtml_v">I am innerhtml <span hidden>Do't hide me</span><strong>BOLD</strong></div>
<div id="textcontent_v">I am textcontent <span hidden>Do't hide me</span><strong>BOLD</strong></div>
<script src="practice.js"></script>
</body>
</html>
Raw
practice.js
// When we use innerText then any htm tag will not render
const innertext = document.getElementById('innertext');
innertext.innerText = '<strong>Hello, World!</strong>';
// When we use innerHTML then any htm tag will render
const innerhtml = document.getElementById('innerhtml');
innerhtml.innerHTML = '<strong>Hello, World!</strong>';
// When we use textContent then any htm tag will not render
const textcontent = document.getElementById('textcontent');
textcontent.textContent = '<strong>Hello, World!</strong>';
// Interneting difference in innerText and textcontent is while we try to get content
const innertext_v = document.getElementById('innertext_v');
console.log(innertext_v.innerText);
// I am innertext BOLD
const innerhtml_v = document.getElementById('innerhtml_v');
console.log(innerhtml_v.innerHTML);
// I am innerhtml <span hidden="">Do't hide me</span><strong>BOLD</strong>
// When we use textContent then any htm tag will not render
const textcontent_v = document.getElementById('textcontent_v');
console.log(textcontent_v.textContent);
// I am textcontent Do't hide meBOLD
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment