JS innerText

Prev Next

The innerText property in JavaScript is used to set or retrieve the text content of an HTML element. Unlike innerHTML, which can interpret and insert HTML tags, innerText only deals with plain text. This makes it useful for scenarios where you need to update or display text without affecting the structure or style of the HTML.

• Purpose: To get or set the text content of an element, without interpreting it as HTML.

• Usage: Ideal for displaying or updating text such as validation messages, status updates, or user feedback.

• Difference from innerHTML: innerText does not render HTML tags and treats all text as plain text, while innerHTML can insert and render HTML tags.

Syntex:

To get the text content of an element:

var text = document.getElementById("elementId").innerText;

To set the text content of an element:

document.getElementById("elementId").innerText = "New text content";

Example:

<input type="password" id="passwordField" onkeyup="checkPasswordStrength()" placeholder="Enter your password">
<p id="strength">Password strength will be displayed here</p>

<script>
  function checkPasswordStrength() {
    var password = document.getElementById("passwordField").value;
    var strengthMessage = "Weak";
    if (password.length > 8) {
      strengthMessage = "Moderate";
    }
    if (password.length > 12) {
      strengthMessage = "Strong";
    }
    document.getElementById("strength").innerText = "Password strength: " + strengthMessage;
  }
</script>

Output:

Password strength will be displayed here

Prev Next