Change the textual content for the element

We found the desired element and displayed its textual content in the console. But this content needs to be changed for our assignment. How can we do that? We can assign a new value to the textContent property.

Let’s take a paragraph with the following text:

<p>Your ad could appear here.</p>

And let’s rewrite its textual content:

let paragraph = document.querySelector('p');
paragraph.textContent = 'Muffin was here. Meow!';

Please note that text strings must be enclosed in quotation marks.

When the instruction is executed, the text inside the paragraph will change:

<p>Muffin was here. Meow!</p>

When we assign the new value to the textContent property, it completely replaces the old one. As in the case of switching classes, JavaScript does not change the source markup. Rather, it changes the text directly in the user’s browser.

The textContent property is intended only for textual content. if you write HTML tags in it, the browser will not interpret them.

Let’s practice what we have learned.