Difference between innerText, innerHTML, and value?

html

dom-manipulation

user-interactions

performance

byNikita Barsukov·Feb 4, 2025

innerText represents the visual content, the text you see sans HTML styling.

innerHTML targets the raw HTML structure, letting you interplay with the HTML markup.

value refers to the live data in interactive elements like input, textarea, or select.

// Sets text, ignoring HTML - the Ascetic way
document.querySelector('#elem').innerText = 'Text';

// Sets HTML, changing structure - Picasso mode engaged
document.querySelector('#elem').innerHTML = '<span>HTML</span>';

// Sets value, for inputs/forms - secret agent stuff
document.querySelector('#input').value = 'Data';

innerText, innerHTML, & value in detail

Getting familiar with innerText, innerHTML, and value properties will aid in DOM manipulation and user interactions. Let's dive deeper into these practical aspects.

innerText - Eyes wide shut

innerText is like a reality filter that screens out CSS designs and invisibility cloaks. It spouts the text seen on screen, sidelining scripts and style tags.

XSS-safe: Thwarts HTML parsing, a good bet for setting plain text.
Scraping helper: Ideal for retrieving visible strings for accessibility or data processing.

// Just the visible truth, please!
console.log(document.querySelector('.styledText').innerText);

innerHTML - The Shapeshifter

innerHTML grants control over the HTML content within elements. Unleash your creativity and morph the document layout and design.

Dynamic content: Enables the creation of interactive designs with nested HTML tags.
Web Ninja Alert: Ward off XSS attacks—avoid untrusted content.

// Spawns new HTML babies
document.querySelector('.content').innerHTML = '<div class="new">New Element</div>';

value - The Secret Cipher

value, the goto property for form elements, mirrors the current user input in fields like input, select, or textarea.

Input handler: Key to collecting and processing form input.
Dynamic response: Modify on-the-fly to create responsive interfaces.

// The user's offering to the form Gods
document.querySelector('#username').value = 'user123';

All about the nuances

Diving into invisibility with innerText

In the unseen realms, innerText takes into account CSS rules. Rendered invisible by display: none, it vanishes from innerText spellbook.

hiddenElement.style.display = 'none';
console.log(hiddenElement.innerText); // Outputs: '', Because 'What you can't see, can't console you!'

Crafting complex structures with innerHTML

innerHTML champions the cause for sophisticated HTML designs, empowering you with advanced rendering ploys.

const markup = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
listContainer.innerHTML = markup; // Et voila, a UList Universe, all HTML tags included!

Consistency is key for value

Keeping track of the live user imput, irrespective of the current state of the element (focused, blurred, etc.), value fortifies your form management and validity checks.

const userData = {
  username: document.querySelector('#username').value, // JamesBond007
  email: document.querySelector('#email').value // [email protected] 
};

Avowing allegiance to performance with innerHTML

Abusing innerHTML for frequent changes to DOM could set you back by operational cost and potential reflow/repaints. Opt for DOM methods like createElement and appendChild, the silent performers.

const newElement = document.createElement('p');
newElement.textContent = 'Slow and steady wins the render race!';
document.body.appendChild(newElement);