javascript change text

How To Change The Text Of An Element Using JavaScript?

by

Discover how to easily change the text of any element on your webpage using JavaScript.

This article will guide you through the use of the textContent and innerHTML properties to update text in real-time, with clear examples and explanations.

Experience the impact of JavaScript in making your website more engaging with dynamic text updates in real-time.

Changing text in JavaScript

The HTML Document Object Model (DOM) allows JavaScript to modify or change the content of HTML elements.

JavaScript is a programming language that allows you to add interactivity to your website.

One of the things you can do with JavaScript is change the text on your webpage.

There are two main ways to do this: using the textContent property or the innerHTML property.

The textContent property lets you change the text of an element, without changing any of its HTML structure.

On the other hand, the innerHTML property lets you change not only the text, but also the HTML content of an element.

How to change a text with JavaScript?

To change the text of an element using JavaScript, you can use the textContent or innerHTML properties.

Using textContent property

Here’s an example of how to change the text of an element with the id “ITSC“ using the textContent property:

document.getElementById("id").textContent = "New text!";

Here’s the complete code:

<!DOCTYPE html>
<html>

<head>
	<title>
		How to change the text using JavaScript ?
	</title>
	<style>
		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 90vh;
			margin: 0;
		}
	</style>
</head>

<body>
	
	<h1 style="color:blue;">
		Itsourcecode
	</h1>

	<h4>
		Click the button to change
		the text.
	</h4>

	<p id = "ITSC"> ✅

		Welcome to Itsourcecode
	</p>
	
	<br>
	
	<button onclick="itsourcecode()">
		Try to click me!
	</button>

	<script>
		function itsourcecode() { 
			document.getElementById('ITSC').textContent ✅
				= 'Itsourcecode.com is designed to help new and experienced programmers expand their knowledge and improve their programming skills';
		}
	</script>
</body>

</html>

Output:

Using innerHTML property

If you want to change the HTML content of an element, you can use the innerHTML property.

Here’s an example that changes the text of an element with id=”ITSC” using the innerHTML property:

document.getElementById("id").innerHTML = new HTML

Here’s the complete code:

<!DOCTYPE html>
<html>

<head>
	<title>
		How to change the text using JavaScript?
	</title>
	<style>
		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 90vh;
			margin: 0;
		}
	</style>
</head>

<body>
	
	<h1 style="color:blue;">
		Welcome to Itsourcecode
	</h1>

	<h4>
		Click the button to change
		the text.
	</h4>

	<p id = "ITSC"> ✅
		Welcome to Itsourcecode
	</p>
	
	<br>
	
	<button onclick="itsourcecode()">
		Try to Click Me!
	</button>

	<script>
		function itsourcecode() {
			document.getElementById('ITSC').innerHTML ✅

				= 'Itsourcecode.com is designed to help new and experienced programmers expand their knowledge and improve their programming skills';
		}
	</script>
</body>

</html>

Output:

However, keep in mind that using innerHTML can be a security risk if you’re not careful, as it can introduce cross-site scripting (XSS) vulnerabilities.

So, if you’re only changing text and not adding any HTML elements, it’s generally safer to use textContent.

Conclusion

In conclusion, this article provides a straightforward guide to changing the text of webpage elements using JavaScript.

We have discussed the two primary methods, the textContent and innerHTML properties, both of which allow dynamic text updates.

While textContent is recommended for safer text-only changes, innerHTML enables alterations to HTML content as well.

We are hoping that this article provides you with enough information that helps you understand the JavaScript change text.

If you want to dive into more JavaScript topics, check out the following articles:

Thank you for reading itsourcecoders 😊.

Leave a Comment