//
In this tutorial, we'll explore how to manipulate HTML content and CSS styles dynamically using JavaScript. Understanding these techniques is crucial for creating interactive web applications that respond to user actions in real-time.
The Document Object Model (DOM) provides a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. By manipulating the DOM, you can dynamically update the HTML content and CSS styles of your webpage without needing to reload the page.
In this tutorial, we'll cover several methods to modify:
innerHTMLThese techniques will allow you to create interactive web applications that respond to user actions in real-time.
The simplest way to change text content is by using the textContent property. This property allows you to get or set the text content of an element and its descendants.
1// script.js2document.getElementById('demo').textContent = 'Hello, World!';
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>Change Text</title>7</head>8<body>9<p id="demo">Original text</p>10<script src="script.js"></script>11</body>12</html>
The innerHTML property allows you to get or set the HTML content of an element. This is useful when you need to insert HTML elements dynamically.
1// script.js2document.getElementById('demo').innerHTML = '<strong>Bold Text</strong>';
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>Insert HTML</title>7</head>8<body>9<div id="demo">Original text</div>10<script src="script.js"></script>11</body>12</html>
Attributes are additional pieces of information that can be added to HTML elements. You can modify these attributes using the setAttribute, getAttribute, and removeAttribute methods.
1// script.js2document.getElementById('demo').setAttribute('href', 'https://www.example.com');
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>Change Attribute</title>7</head>8<body>9<a id="demo" href="#">Link</a>10<script src="script.js"></script>11</body>12</html>
You can modify the CSS styles of an element using the style property. This allows you to change individual style properties dynamically.
1// script.js2document.getElementById('demo').style.color = 'red';
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>Change Style</title>7</head>8<body>9<p id="demo">Original text</p>10<script src="script.js"></script>11</body>12</html>
Let's create a simple interactive application that changes the text, style, and attribute of an element when a button is clicked.
1// script.js2document.getElementById('changeButton').addEventListener('click', function() {3const demoElement = document.getElementById('demo');4// Change text content6demoElement.textContent = 'Text has been changed!';7// Change style9demoElement.style.color = 'green';10demoElement.style.fontSize = '24px';11// Change attribute13demoElement.setAttribute('href', 'https://www.example.com');14});
1<!-- index.html -->2<!DOCTYPE html>3<html lang="en">4<head>5<meta charset="UTF-8">6<title>Interactive Example</title>7</head>8<body>9<a id="demo" href="#">Original Link</a>10<button id="changeButton">Change Text and Style</button>11<script src="script.js"></script>12</body>13</html>
[Original Link](#) [Text has been changed!](https://www.example.com)
textContent to get or set the text content of an element.innerHTML to insert HTML content into an element.setAttribute, getAttribute, and removeAttribute to modify attributes of an element.style property to change individual CSS styles dynamically.In the next tutorial, we'll explore how to handle events in JavaScript. Events are actions that occur when a user interacts with a webpage, such as clicking a button or typing in an input field. Understanding and handling events is essential for creating interactive web applications.
Stay tuned!