Home » JavaScript » JavaScript innerHTML Property

JavaScript innerHTML Property

The innerHTML property is used to write the dynamic(run time) html on the html document. By using this properties of an element can be changed even after fully loading the webpage.

JavaScript innerHTML

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerHTML </title>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>
</body>
</html>

Output

JavaScript innerHTML Examples

Click me to change my HTML content (innerHTML).

In this example below, the innerHTML property is used to change the link properties like its color, url and its target.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerHTML Change Link </title>
</head>
<body>
<a id="myAnchor" href="http://www.Youtube.com">Youtube</a>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
document.getElementById("myAnchor").innerHTML = "CodeRepublics";
document.getElementById("myAnchor").href = "https://www.coderepublics.com";
document.getElementById("myAnchor").target = "_blank";
}
</script>
</body>
</html>

Output

JavaScript innerHTML Change Link Youtube

JavaScript innerText Property

The innerText property is used to write the dynamic(run time) text on the html document. It is mostly used in the web pages for writing the validation message, password strength etc.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript innerText </title>
</head>
<body>
<script>
function validate() {
var msg;
if(document.myFunction.userPass.value.length==5){
msg="Normal Password";
}
else if(document.myFunction.userPass.value.length>=5){
msg="Strong Password";
}
else{
msg="Weak Password";
}
document.getElementById('mylocation').innerText=msg;
}
</script>
<form name="myFunction">
<h3>Enter Password:</h3>
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength: <span id="mylocation">No strength</span>
</form>
</body>
</html>

Output

JavaScript innerText

Recommended :

1 . How to use JavaScript ?
2 . Use events in Forms using JavaScript
3 . Role of Numbers in JavaScript
4 . JavaScript Date Method

5 . Type Conversion
6 . Error Handling in JavaScript
7 . Photography Snippets using HTML and CSS
8 . Create Simple Login Form

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors