Blog

You are currently viewing JavaScript Cheat Sheet 11.1.7: jQuery HTML DOM

JavaScript Cheat Sheet 11.1.7: jQuery HTML DOM

jQuery HTML DOM Manipulation


In this tutorial, we’ll cover the basics of programming using JavaScript and jQuery, focusing specifically on manipulating the HTML Document Object Model (DOM). Understanding how to interact with the DOM is essential for building dynamic and interactive web pages. We’ll start from scratch and gradually build up our knowledge, providing clear explanations and sample code along the way.

Getting Started with JavaScript

JavaScript is a versatile programming language primarily used for creating interactive web pages. It’s supported by all modern web browsers and can be embedded directly into HTML documents.

Let’s begin by creating a simple HTML file and including a JavaScript script tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM Tutorial</title>
</head>
<body>

<h1 id="heading">Hello, World!</h1>

<script>
    // JavaScript code will go here
</script>

</body>
</html>

Explanation:

  • We’ve created a basic HTML document structure with a heading element <h1> containing the text “Hello, World!”.
  • Inside the <script> tag, we’ll write our JavaScript code to manipulate the DOM.

Selecting DOM Elements

In JavaScript, you can select HTML elements using various methods. One common method is using document.getElementById() to select elements by their ID attribute.

<script>
    // Select the element with the ID "heading"
    var headingElement = document.getElementById('heading');
    console.log(headingElement.innerHTML); // Output: Hello, World!
</script>

Explanation:

  • We use document.getElementById() to select the element with the ID “heading”.
  • We store the selected element in a variable named headingElement.
  • We then log the inner HTML content of the selected element to the console using console.log().

Modifying DOM Elements

Once we’ve selected a DOM element, we can modify its attributes, properties, or content using JavaScript.

<script>
    // Select the element with the ID "heading"
    var headingElement = document.getElementById('heading');

    // Change the text content of the heading
    headingElement.innerHTML = "Welcome to JavaScript DOM Tutorial";

    // Change the background color of the heading
    headingElement.style.backgroundColor = "lightblue";
</script>

Explanation:

  • We use innerHTML property to change the content of the headingElement.
  • We use the style property to modify CSS properties of the headingElement, in this case, changing the background color to “lightblue”.
  1. Adding and Removing DOM Elements:

JavaScript allows us to dynamically add or remove elements from the DOM.

<script>
    // Create a new paragraph element
    var paragraph = document.createElement('p');

    // Set the text content of the paragraph
    paragraph.textContent = "This is a dynamically created paragraph.";

    // Append the paragraph to the body of the document
    document.body.appendChild(paragraph);

    // Remove the paragraph after 3 seconds
    setTimeout(function() {
        document.body.removeChild(paragraph);
    }, 3000);
</script>

Explanation:

  • We use document.createElement() to create a new <p> (paragraph) element.
  • We set the text content of the paragraph using textContent.
  • We append the paragraph to the body of the document using appendChild().
  • We use setTimeout() function to remove the paragraph after 3 seconds using removeChild().

Using jQuery for DOM Manipulation

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies various tasks like DOM manipulation, event handling, and AJAX calls.

First, include jQuery library in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery DOM Tutorial</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h1 id="heading">Hello, World!</h1>

<script>
    // jQuery code will go here
</script>

</body>
</html>

Explanation:

  • We include jQuery library from a CDN (Content Delivery Network) using <script> tag.

Now, let’s rewrite the previous examples using jQuery:

<script>
    // Select the element with the ID "heading" using jQuery
    var headingElement = $('#heading');

    // Change the text content of the heading
    headingElement.text("Welcome to jQuery DOM Tutorial");

    // Change the background color of the heading
    headingElement.css("background-color", "lightblue");

    // Create a new paragraph element and append it to the body
    var paragraph = $('<p>').text("This is a dynamically created paragraph.");
    $('body').append(paragraph);

    // Remove the paragraph after 3 seconds
    setTimeout(function() {
        paragraph.remove();
    }, 3000);
</script>

Explanation:

  • We use the $('#heading') selector to select the element with the ID “heading”.
  • We use .text() method to change the text content and .css() method to change the background color.
  • We create a new paragraph element using $('<p>') and append it to the body using $('body').append().
  • We use .remove() method to remove the paragraph after 3 seconds.

Conclusion


Congratulations! You’ve learned the basics of programming using JavaScript and jQuery for DOM manipulation. Practice these concepts by experimenting with different elements and scenarios. As you become more comfortable, you can explore advanced topics and build more complex applications. Happy coding!

Tags: , ,

Leave a Reply