Blog

You are currently viewing JavaScript Cheat Sheet 10.60: JavaScript HTML DOM – Changing HTML

JavaScript Cheat Sheet 10.60: JavaScript HTML DOM – Changing HTML

Introduction to JavaScript HTML DOM – Changing HTML

In this tutorial, you will learn the basics of programming using JavaScript with a focus on manipulating the HTML Document Object Model (DOM). The DOM represents the structure of an HTML document and allows JavaScript to interact with it dynamically. Specifically, we’ll explore how to change HTML content using JavaScript.

Getting Started

To follow along with this tutorial, create an HTML file (e.g., index.html) and a JavaScript file (e.g., script.js). Open the HTML file in your preferred web browser.

Step 1: Setting up the HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript HTML DOM - Changing HTML</title>
</head>
<body>
    <h1 id="heading">Original Heading</h1>
    <p id="paragraph">Original Paragraph</p>
    <button onclick="changeContent()">Change Content</button>

    <script src="script.js"></script>
</body>
</html>

Step 2: Creating the JavaScript File

function changeContent() {
    // Code to change HTML content will go here
}

Modifying HTML Content

JavaScript can dynamically modify HTML content by accessing and manipulating elements in the DOM.

Scenario 1: Changing Text Content

Let’s start by changing the text content of an HTML element.

function changeContent() {
    var headingElement = document.getElementById("heading");
    headingElement.textContent = "New Heading";
}

Explanation:

  • We use document.getElementById("heading") to select the HTML element with the id “heading”.
  • textContent property is used to set the text content of the selected element.

Scenario 2: Changing HTML Content

You can also change the entire HTML content of an element.

function changeContent() {
    var paragraphElement = document.getElementById("paragraph");
    paragraphElement.innerHTML = "<em>New</em> Paragraph";
}

Explanation:

  • Similar to before, we select the HTML element with the id “paragraph”.
  • Instead of textContent, we use the innerHTML property to set HTML content.

Conclusion

Congratulations! You’ve learned how to manipulate HTML content using JavaScript. You can now dynamically update your web pages to provide a better user experience. Practice these concepts to become proficient in DOM manipulation with JavaScript.

Tags: , ,

Leave a Reply