At The App Founders, we create top-notch products with great user interfaces. Our talented team in web and mobile development connects creativity with technology, turning our solutions into inspiring tech brands.
Unlock the full article with just a tap on the play icon. Let’s dive in!
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM provides APIs (such as properties and methods) to access and manipulate a document’s content.
Three commonly used DOM properties for accessing and modifying element content are innerText, innerHTML, and value. At a high level:
innerText returns just the text content of an element
innerHTML returns the HTML markup as well as the text content of an element
value returns the value of form elements such as <input>, <select>, and <textarea>
While the names are similar, important differences between these 3 properties determine when and how they should be used. This article by The App Founders will help you examine the key distinctions, best use cases, and browser support for innerText, innerHTML, and value.
Defining the DOM
The DOM (Document Object Model) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects – each page element (like a paragraph or image) is a node.
When a web page is loaded, the browser creates a DOM of the page. The DOM is constructed as a tree of objects:
The topmost object is the document itself
Each HTML tag is an object – the <html> tag is the root object
Text inside tags are objects, too
All these objects are connected in a tree structure
So, the DOM allows JavaScript to access and manipulate elements on a webpage. We can traverse nodes, add/remove nodes, edit content, modify styling, and more using DOM methods and properties. The DOM is not the actual HTML but a live representation that can be modified.
innerText Explained
The innerText property returns the visible text contained within an element. Specifically, it returns the text directly within the element without additional markup or child elements.
For example, if you have the following HTML:
<div id="text">
<p>Hello <b>World</b></p>
</div>
Using document.getElementById('text'), .innerText would return “Hello World” – it extracts just the visible text, ignoring the <b> element inside.
The innerText property essentially converts an element’s content to plain text. Any child elements are ignored – their text contents are extracted, but their tags are stripped out.
This makes innerText useful for getting the textual content of an element in a simple way without worrying about the underlying HTML structure. Just be aware that any text hidden via CSS (such as with display: none;) will not be returned by innerText.
Some key points about innerText:
Returns only visible text, stripped of HTML tags
Ignores any child elements, just extracting their text
Obeys CSS visibility and display rules
Supported in most major browsers
It can be used to get or set text content
So in short, innerText provides a straightforward, focusing on user experience importance, way to get the visible text content of an element, ignoring any HTML elements or structure within it.
innerHTML Explained
The innerHTML property allows accessing and modifying the HTML content of an element.
What is innerHTML?
The innerHTML property returns the HTML content within an element as a string. This includes all the HTML tags and text contained inside the element.
For example, if you have a div element like:
<div id="myDiv">
<p>Hello World!</p>
</div>
The inner HTML of this div would be:
document.getElementById("myDiv").innerHTML;
// "<p>Hello World!</p>"
So innerHTML doesn’t just return the text but the full HTML structure inside the element.
How Inner HTML Works
When you get the innerHTML property, the browser generates a string representing the HTML content within that element.
When you set the innerHTML property, the browser will parse the string as HTML and replace the element’s content with the new DOM nodes the HTML string represents.
For example:
const div = document.getElementById("myDiv");
div.innerHTML = "<strong>New content</strong>";
This will replace the entire contents of the div with the <strong> element.
So, using innerHTML allows effortless insertion and modification of HTML within an element. However, it is important to sanitize any user-generated content before inserting it via innerHTML to avoid XSS vulnerabilities.
Value Property Explained
The value property returns the value of an element. For input elements like <input>, <select>, and <textarea>, this refers to the entered value inside the form control.
For example, if you have the following HTML:
<input type="text" id="name" value="John">
You can get the current value of the input box with:
const input = document.getElementById('name');
console.log(input.value); // John
In this case, the value property will return whatever the user has typed into the input field.
For other form elements like checkboxes, radios, and select dropdowns, the value property returns the value associated with the selected option.
<select id="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
</select>
const select = document.getElementById('color');
console.log(select.value); // blue
So, the value property gives you easy access to the user-selected value for form elements. This makes it convenient for fetching form data on submission.
The value property can also be set to dynamically update the value displayed in the form control:
input.value = 'Nancy'; // Sets the input text to Nancy
The value property returns the current value of a form element, and allows setting the value to dynamically update the form control.
Key Differences
The key differences between innerText, inner HTML, and value are:
innerText shows the rendered text content of an element and its descendants. It ignores styling and only returns visible text.
innerHTML returns the raw HTML markup inside an element. It does not ignore styling or return only visible text.
value is a property specifically for form elements like <input>, <select>, and <textarea>. It returns the user’s value entered or selected in a form field.
innerText and innerHTML can be used on any element, while value only applies to form elements.
innerText provides cross-browser support, while innerHTML support is inconsistent across browsers. Value is supported across browsers for form elements.
innerText ignores styling and returns only visible text content. innerHTML returns styled text. Value returns the raw value entered or selected by the user.
innerText shows text with newlines and spaces condensed. innerHTML shows text as written in the HTML source. Value returns the exact value without modification.
innerText is read-only for some elements in IE and Firefox. innerHTML can be used to modify content. Value is read/write and commonly modified via JavaScript.
innerText does not return script content or CSS style information. innerHTML returns everything, including scripts and styles.
When To Use Each
The innerText, innerHTML, and value properties each serve different purposes, so knowing when to use each is important. Here are some guidelines:
Use innerText when you just need the plain text content of an element. This is useful for getting or setting text without any HTML formatting.
Use innerHTML to get or set raw HTML content inside an element. This allows you to insert formatted content, links, images, etc. However, use caution as it exposes XSS vulnerabilities if inserting user-generated content.
Use value when working with form fields like input, select, and textarea. It maps to the value the user has entered or selected in that form control.
Avoid innerHTML if the content is user-controllable and may contain malicious code. Prefer innerText or textContent instead.
Use value for getting user input from form elements. Use innerText/textContent for getting or setting text in non-form elements.
innerHTML is great for dynamic applications where you must add, remove, or modify parts of the DOM on the fly.
Value is the right choice for getting and setting the state of form fields.
Accessing & Modifying
The innerText, innerHTML, and value properties can all be accessed and modified by any Hybrid App Development Agency in JavaScript to dynamically change the content of elements.
Accessing
To access the innerText of an element:
const elem = document.getElementById('elem');
const elemText = elem.innerText;
For innerHTML:
const elem = document.getElementById('elem');
const elemHTML = elem.innerHTML;
And for value:
const input = document.getElementById('input');
const inputValue = input.value;
Modifying
To modify innerText:
elem.innerText = 'New text content';
For innerHTML:
elem.innerHTML = '<strong>New HTML</strong>';
And to modify value:
input.value = 'New input value';
So accessing the property gives you its current value while modifying it allows you to programmatically update the content.
Browser Support
The innerText, innerHTML, and value properties have excellent browser support across all major browsers. This includes both desktop and mobile browsers.
innerText is supported in all browsers, including IE6+.
innerHTML is supported in all major browsers, including IE8+. IE7 and below do not support innerHTML.
The value property is supported in all browsers, including IE6+.
Therefore, all 3 properties work in modern browsers like Chrome, Firefox, Safari, Edge, etc. For Internet Explorer, innerText and value work even in old versions like IE6, but innerHTML only works in IE8 and above. The key exception is IE7, and below does not support innerHTML.
This excellent cross-browser support means you can safely use these properties and web app development techniques to access and modify DOM elements without worrying about browser compatibility issues. innerText and value have the widest support, while innerHTML lacks support only in IE7 and earlier.
innerText refers to and allows modifying just the text content of an element and its descendants. It ignores any HTML tags.
innerHTML allows modifying the full HTML content inside an element, including child elements and text.
Value refers to form elements like input, select, and textarea. It gets and sets the value that is submitted with the form.
So, in summary, innerText, innerHTML, and value all serve related but distinct purposes in accessing and modifying DOM elements. Understanding the differences allows you to use the right property for different use cases. innerText for just text, innerHTML for full HTML, and value for form values.
Search blogs
Explore our blog archive for valuable insights and expert advice.
All company logos and trademarks appearing on our website are the property of their respective owners. We are not affiliated, associated, endorsed by, or in any way officially connected with these companies or their trademarks. The use of these logos and trademarks does not imply any endorsement, affiliation, or relationship between us and the respective companies. We solely use these logos and trademarks for identification purposes only. All information and content provided on our website is for informational purposes only and should not be construed as professional advice. We do not guarantee the accuracy or completeness of any information provided on our website. We are not responsible for any errors or omissions, or for the results obtained from the use of this information. Any reliance you place on such information is strictly at your own risk.
Automated page speed optimizations for fast site performance
