Dynamic Rendering

Dynamic rendering refers to the process of updating the content of a webpage in response to user actions or other events without requiring a full page reload. This technique is crucial for creating interactive and responsive web applications.

1. Introduction to Dynamic Rendering

Dynamic rendering involves using JavaScript to change the content of the DOM based on user interactions or other events. This can include updating text, images, forms, or even entire sections of a webpage.

Example Use Cases:

  • Showing and hiding elements

  • Updating content based on user input

  • Loading data asynchronously and updating the UI

2. Using innerHTML for Dynamic Content

The innerHTML property allows you to get or set the HTML content of an element. This is one of the simplest ways to render content dynamically.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Rendering Example</title>
  </head>
  <body>
    <h1 id="header">Welcome!</h1>
    <button id="changeContentButton">Change Content</button>

    <script>
      document.getElementById("changeContentButton").addEventListener("click", function() {
        document.getElementById("header").innerHTML = "Content Changed!";
      });
    </script>
  </body>
</html>

In this example, clicking the button changes the content of the header.

3. Using Template Literals for Dynamic HTML

Template literals (enclosed in backticks `) allow for more readable and maintainable dynamic HTML generation, especially when incorporating variables.

Example:

let userName = "Alice";
document.getElementById("header").innerHTML = `Hello, ${userName}!`;

This example uses a template literal to insert the value of userName into the HTML content.

4. Creating and Appending Elements

Instead of replacing content using innerHTML, you can create new elements and append them to the DOM. This method is more flexible and safer (less prone to security issues like XSS).

Example:

let newElement = document.createElement("p");

newElement.textContent = "This is a dynamically added paragraph.";
document.body.appendChild(newElement);

This example creates a new paragraph element and adds it to the end of the body.

5. Modifying Attributes

You can dynamically change the attributes of DOM elements, such as src for images, href for links, and custom attributes.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Attribute Example</title>
  </head>
  <body>
    <img id="myImage" src="initial.jpg" alt="Initial Image">
    <button id="changeImageButton">Change Image</button>

    <script>
      document.getElementById("changeImageButton").addEventListener("click", function() {
        document.getElementById("myImage").src = "newImage.jpg";
        document.getElementById("myImage").alt = "New Image";
      });
    </script>
  </body>
</html>

In this example, clicking the button changes the src and alt attributes of the image.

6. Working with Forms

You can dynamically update form fields, submit forms using JavaScript, and handle form validation.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Form Example</title>
  </head>
  <body>
    <form id="myForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <button type="submit">Submit</button>
    </form>
    <div id="formOutput"></div>

    <script>
      document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault();
        let name = document.getElementById("name").value;
        document.getElementById("formOutput").innerHTML = `Hello, ${name}!`;
      });
    </script>
  </body>
</html>

In this example:

  • The form submission is handled using JavaScript to prevent the default action.

  • The form data is retrieved and displayed dynamically.

7. Fetching Data Asynchronously

You can fetch data from a server asynchronously and update the DOM with the retrieved data. The fetch API is commonly used for this purpose.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Data Fetching</title>
  </head>
  <body>
    <button id="loadDataButton">Load Data</button>
    <div id="dataOutput"></div>

    <script>
      document.getElementById("loadDataButton").addEventListener("click", function() {
        fetch('<https://jsonplaceholder.typicode.com/posts/1>')
          .then(response => response.json())
          .then(data => {
            document.getElementById("dataOutput").innerHTML = `
              <h2>${data.title}</h2>
              <p>${data.body}</p>
            `;
          })
          .catch(error => console.error('Error fetching data:', error));
      });
    </script>
  </body>
</html>

In this example:

  • Clicking the button fetches data from a placeholder API.

  • The data is then used to dynamically update the content of a div.

Use Case project - Comment section:

Suppose you're building a web application where users can add comments dynamically without reloading the page.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Comment Section</title>
  </head>
  <body>
    <h1>Comment Section</h1>
    <input type="text" id="commentInput" placeholder="Write a comment">
    <button id="addCommentButton">Add Comment</button>
    <ul id="commentList"></ul>

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

JavaScript:

document.getElementById("addCommentButton").addEventListener("click", function() {
  let commentText = document.getElementById("commentInput").value;
  if (commentText !== "") {
    let newComment = document.createElement("li");
    newComment.textContent = commentText;

    // Add a remove button to each comment
    let removeButton = document.createElement("button");
    removeButton.textContent = "Remove";
    removeButton.addEventListener("click", function() {
      document.getElementById("commentList").removeChild(newComment);
    });
    newComment.appendChild(removeButton);

    document.getElementById("commentList").appendChild(newComment);
    document.getElementById("commentInput").value = ""; // Clear the input
  }
});

In this example:

  • We select the input, button, and list elements.

  • We add an event listener to the button that creates a new list item with the input text when clicked.

  • Each new comment includes a "Remove" button that, when clicked, removes the comment from the list.

This use case demonstrates how to use dynamic rendering to update the DOM in response to user interactions, creating a more interactive and responsive web application. Understanding dynamic rendering is essential for modern web development, allowing you to create engaging and user-friendly interfaces.

Help us improve the content 🤩

You can leave comments here.

PreviousDOM ManipulationNextAsynchronous Coding

Last updated