Advertisement

Advertisement


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


<!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.


<!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.



<!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

Enter Password:

Strength: No strength








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.