JavaScript innerText: основное использование и примеры

JS innerText

JS innerText is an object property that allows you to get or change the text content of an element on a web page. It is one of the ways to work with the content of a website using JavaScript.

To get the value of an element's innerText using JavaScript, we can use the following syntax:

var element = document.getElementById('myElement'); // get the element by its id
var text = element.innerText; // get the text content of the element
console.log(text); // output the text to the console

In this example, we use the getElementById method to get the element by its unique identifier (id), and then assign it to the variable element. Then we use the innerText property to get the text content of this element and assign it to the variable text. We then output the contents of the text variable to the console using the console.log method.

If we want to change the text content of an element using innerText, we can simply assign a new value to this property, as shown below:

var element = document.getElementById('myElement'); // get the element by its id
element.innerText = 'New text'; // assign the element a new text content

Here, we use the same getElementById method to get the element, and then assign the new value 'New text' to the innerText property of this element.

Using the innerText property has its own features and differences from other properties, such as innerHTML. The main difference between them is that innerText only returns the text content of the element, ignoring any HTML tags inside it, while innerHTML returns not only the text but also any HTML tags present inside the element.

For example, if we have the following HTML code:

<div id="myElement">
  <p>Example text <b>with bold formatting</b></p>
</div>

And we use the following JavaScript code:

var element = document.getElementById('myElement'); // get the element by its id
var text = element.innerText; // get the text content of the element
console.log(text);

The output in the console will be:

Example text with bold formatting

As you can see, innerText ignored the HTML tags and returned only the text content of the element.

However, if we use innerHTML instead of innerText:

var element = document.getElementById('myElement'); // get the element by its id
var text = element.innerHTML; // get all the content of the element, including HTML tags
console.log(text);

The output in the console will be:

<p>Example text <b>with bold formatting</b></p>

As you can see, innerHTML returned not only the text but also all the HTML tags inside the element.

Now you know how to use the innerText property to get or change the text content of an element in JavaScript. This can be useful for dynamically updating content on your website or performing other text manipulations.