- JavaScript Basics
- JavaScript Tutorial
- JavaScript: where to write
- JavaScript: how to display
- JavaScript: keywords
- JavaScript: comments
- JavaScript: variables
- JavaScript: operators
- JavaScript: data types
- JavaScript Conditional Statements
- JavaScript: if-else
- JavaScript: switch
- JavaScript: for loop
- JavaScript: while loop
- JavaScript: do-while loop
- JavaScript: break and continue
- JavaScript Popup Boxes
- JavaScript: alert box
- JavaScript: confirm box
- JavaScript: prompt box
- JavaScript Popular Topics
- JavaScript: functions
- JavaScript: innerHTML
- JavaScript: getElementById()
- JavaScript: getElementsByClassName()
- JavaScript: getElementsByName()
- JavaScript: getElementsByTagName()
- JavaScript: querySelector()
- JavaScript: querySelectorAll()
- JavaScript: document.write()
- JavaScript: console.log()
- JavaScript: boolean
- JavaScript: events
- JavaScript: Math object
- JavaScript: Math.random()
- JavaScript: Number()
- JavaScript: parseInt()
- JavaScript: parseFloat()
- JavaScript Arrays
- JavaScript: array
- JavaScript: find length of array
- JavaScript: add element at beginning
- JavaScript: add element at end
- JavaScript: remove first element
- JavaScript: remove last element
- JavaScript: get first index
- JavaScript: get last index
- JavaScript: reverse an array
- JavaScript: sort an array
- JavaScript: concatenate arrays
- JavaScript: join()
- JavaScript: toString()
- JavaScript: from()
- JavaScript: check if value exists
- JavaScript: check if array
- JavaScript: slice an array
- JavaScript: splice()
- JavaScript: find()
- JavaScript: findIndex()
- JavaScript: entries()
- JavaScript: every()
- JavaScript: fill()
- JavaScript: filter()
- JavaScript: forEach()
- JavaScript: map()
- JavaScript Strings
- JavaScript: string
- JavaScript: length of string
- JavaScript: convert to lowercase
- JavaScript: convert to uppercase
- JavaScript: string concatenation
- JavaScript: search()
- JavaScript: indexOf()
- JavaScript: search() vs. indexOf()
- JavaScript: match()
- JavaScript: match() vs. search()
- JavaScript: replace()
- JavaScript: toString()
- JavaScript: String()
- JavaScript: includes()
- JavaScript: substr()
- JavaScript: slice string
- JavaScript: charAt()
- JavaScript: repeat()
- JavaScript: split()
- JavaScript: charCodeAt()
- JavaScript: fromCharCode()
- JavaScript: startsWith()
- JavaScript: endsWith()
- JavaScript: trim()
- JavaScript: lastIndexOf()
- JavaScript Date and Time
- JavaScript: date and time
- JavaScript: Date()
- JavaScript: getFullYear()
- JavaScript: getMonth()
- JavaScript: getDate()
- JavaScript: getDay()
- JavaScript: getHours()
- JavaScript: getMinutes()
- JavaScript: getSeconds()
- JavaScript: getMilliseconds()
- JavaScript: getTime()
- JavaScript: getUTCFullYear()
- JavaScript: getUTCMonth()
- JavaScript: getUTCDate()
- JavaScript: getUTCDay()
- JavaScript: getUTCHours()
- JavaScript: getUTCMinutes()
- JavaScript: getUTCSeconds()
- JavaScript: getUTCMilliseconds()
- JavaScript: toDateString()
- JavaScript: toLocaleDateString()
- JavaScript: toLocaleTimeString()
- JavaScript: toLocaleString()
- JavaScript: toUTCString()
- JavaScript: getTimezoneOffset()
- JavaScript: toISOString()
- JavaScript Regular Expression
- JavaScript: regular expression
- JavaScript: RegEx . (dot)
- JavaScript: RegEx \w and \W
- JavaScript: RegEx \d and \D
- JavaScript: RegEx \s and \S
- JavaScript: RegEx \b and \B
- JavaScript: RegEx \0
- JavaScript: RegEx \n
- JavaScript: RegEx \xxx
- JavaScript: RegEx \xdd
- JavaScript: RegEx quantifiers
- JavaScript: RegEx test()
- JavaScript: RegEx lastIndex
- JavaScript: RegEx source
- JavaScript Programs
- JavaScript Programs
JavaScript innerHTML
In JavaScript, innerHTML refers to the content of an HTML element. Therefore, the innerHTML property sets or returns content to or of the specified HTML element. For example:
<!DOCTYPE html>
<html>
<body>
<p>The value is <span id="x"></span></p>
<script>
var element = document.getElementById("x");
element.innerHTML = 10;
</script>
</body>
</html>The value is
In above example, the following statement:
var element = document.getElementById("x");
is used to initialize the element whose ID value is x as an element variable. And using the following statement:
element.innerHTML = 10;
The value 10 was set as the content of the returned element. In this case, if the returned element already has some content, the existing content will be removed and the new content using the innerHTML will be set to it.
To set or get the content of an HTML element using the innerHTML property, we need to get the element using any of the following methods:
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
JavaScript innerHTML syntax
The syntax of the innerHTML property in JavaScript is:
element.innerHTML
JavaScript innerHTML example
Consider the following code as an example demonstrating the use of "innerHTML" in JavaScript:
<!DOCTYPE html>
<html>
<body>
<p id="cc">The name of website is: codescracker.com</p>
<p>The content of P tag, with cc as its ID value is:
<span id="res"></span></p>
<script>
content = document.getElementById("cc").innerHTML;
element = document.getElementById("res");
element.innerHTML = content;
</script>
</body>
</html>The name of website is: codescracker.com
The content of P tag, with cc as its ID value is:
The preceding example includes two paragraphs and a script. The first paragraph has the ID "cc" and the text "The website's name is codescracker.com." The second paragraph includes some text as well as an empty span element with the ID "res".
The JavaScript code within the "script" tags selects the paragraph element with an ID of "cc" using the document.getElementById() method and retrieves its innerHTML value. This value, which is the text "The name of the website is: codescracker.com", is then stored in a variable called "content". The script then selects the span element with the ID "res" using document.getElementById() and stores it in the variable "element" The innerHTML value of the "element" variable is then set to the value of the "content" variable, which is "The name of the website is: codescracker.com".
The text "The name of the website is: codescracker.com" is therefore added to the empty span element with ID "res" when the script executes, matching the innerHTML value of the paragraph element with ID "cc".
The above example can also be written as:
<!DOCTYPE html>
<html>
<body>
<p id="cc">The name of website is: codescracker.com</p>
<p>The content of P tag, with cc as its ID value is:
<span id="res"></span></p>
<script>
document.getElementById("res").innerHTML = document.getElementById("cc").innerHTML;
</script>
</body>
</html>
In above example, the following JavaScript code:
document.getElementById("cc").innerHTML
returns the content of an HTML element, whose ID value is cc. And this content will be initialized to an HTML element whose ID value is res.
« Previous Tutorial Next Tutorial »