Digital

Dynamically Display HTML Code After a Section Using JavaScript

In web development, there are times when we need to dynamically add or display HTML code after a specific section of our webpage. This can be achieved easily with the help of JavaScript.

Brandon Himpfen

Brandon Himpfen

— 2 min read
Dynamically Display HTML Code After a Section Using JavaScript
Photo by Greg Rakozy / Unsplash

In web development, there are times when we need to dynamically add or display HTML code after a specific section of our webpage. This can be achieved easily with the help of JavaScript. In this blog post, we will explore how to use JavaScript to display HTML code after a <section> tag with a specific class.

The following is an example of what we will create in this tutorial and you may also fork it on CodePen to create your own version:

Step 1: Setting Up the HTML: Start by creating an HTML file and including the necessary HTML structure. For the purpose of this tutorial, let's assume we have a <section> element with a class named "gh-content" where we want to display the additional HTML code.

<!DOCTYPE html>
<html>
<head>
    <title>Display HTML Code After a Section</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Welcome to My Website</h1>

    <section class="gh-content">
        <!-- Content of the section goes here -->
    </section>

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

Step 2: Writing the JavaScript Code: Next, create a new JavaScript file (e.g., script.js) and include the following code within the <script> tags:

// Wait for the HTML document to load
document.addEventListener("DOMContentLoaded", function() {
  // Find all elements with class "gh-content"
  var elements = document.getElementsByClassName("gh-content");

  // Loop through each element and append the HTML code
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var htmlCode = "<p>This is the HTML code to display after the section.</p>";

    // Create a new element with class "after-content" to hold the HTML code
    var codeElement = document.createElement("div");
    codeElement.className = "after-content";
    codeElement.innerHTML = htmlCode;

    // Append the new element after the section element
    element.parentNode.insertBefore(codeElement, element.nextSibling);
  }
});

The script above assumes that the content is located in a section with a class called gh-content. You may change this in line four and update the documentation line on line three. You will also need to update the HTML code.

Step 3: Styling the Output (Optional): Optionally, you can add some CSS styles to the newly added HTML code to make it visually appealing. Create a new CSS file (e.g., style.css) and include your desired styles.

.after-content {
  color: #005670;
  font-weight: bold;
  background-color: #8db9ca;
  padding: 0.25rem 0.5rem;
  text-align: center;
  border-radius: 5px;
}

Congratulations! You have successfully learned how to dynamically display HTML code after a section using JavaScript. By following the steps in this blog post, you can easily incorporate this functionality into your web projects. Feel free to customize the HTML code and styles according to your specific requirements. Enjoy!

Read more