Getting and Setting HTML Content in JavaScript

Whether you need to retrieve the HTML content or update it dynamically, JavaScript provides methods to accomplish these tasks. This article explores how to get and set the HTML of an element.

Getting HTML Content

To retrieve the HTML content of an element, you can use the innerHTML property.

This property contains the HTML markup within the opening and closing tags of an element.

Here's a function demonstrating how to get the HTML content:

// Function to get the HTML content of an element
function getHTMLContent(elementId) {
  // Get the element by its ID
  const element = document.getElementById(elementId);

  // Get the HTML content
  const htmlContent = element.innerHTML;

  // Log the HTML content
  console.log(htmlContent);
}

In this code:

Example: Getting HTML Content on Button Click

Let's create a complete example where clicking a button logs the HTML content of a div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Content Example</title>
  <style>
    /* Optional styling for better presentation */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    div {
      id: 'myDiv';
      padding: 20px;
      border: 2px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <button onclick="getHTMLContent('myDiv')">Get HTML Content</button>
  <div id="myDiv">This is a div with <strong>HTML</strong> content.</div>

  <script>
    // Function to get the HTML content of an element
    function getHTMLContent(elementId) {
      const element = document.getElementById(elementId);
      const htmlContent = element.innerHTML;
      console.log(htmlContent);
    }
  </script>
</body>
</html>

In this example:

Setting HTML Content

To set or change the HTML content of an element, you can use the same innerHTML property.

This time, you assign a new HTML string to it. Here's a function demonstrating how to set HTML content:

// Function to set the HTML content of an element
function setHTMLContent(elementId, newHTML) {
  // Get the element by its ID
  const element = document.getElementById(elementId);

  // Set the HTML content
  element.innerHTML = newHTML;
}

In this code:

Example: Setting HTML Content on Button Click

Let's create a complete example where clicking a button updates the HTML content of a div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Content Example</title>
  <style>
    /* Optional styling for better presentation */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    div {
      id: 'myDiv';
      padding: 20px;
      border: 2px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <button onclick="setHTMLContent('myDiv', 'Updated <em>HTML</em> content.')">Set HTML Content</button>
  <div id="myDiv">This is a div with <strong>HTML</strong> content.</div>

  <script>
    // Function to set the HTML content of an element
    function setHTMLContent(elementId, newHTML) {
      const element = document.getElementById(elementId);
      element.innerHTML = newHTML;
    }
  </script>
</body>
</html>

In this example:

Conclusion

Manipulating HTML content dynamically is a fundamental aspect of web development.

Whether you need to retrieve information from the HTML structure or update it based on user interactions, the techniques discussed in this article provide you with the tools to efficiently manage the HTML content of HTML elements.