How to append HTML code to a div using insertAdjacentHTML in JavaScript

A guide on how to append HTML code to a `div` using the `insertAdjacentHTML` method in JavaScript. This method allows you to add content without replacing the existing content.

In this article, we will learn how to use the insertAdjacentHTML method in JavaScript to append HTML code to a div element at different positions without affecting the current content. This is a flexible way to manipulate the DOM compared to using innerHTML.

JavaScript Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Append HTML using insertAdjacentHTML</title>
</head>
<body>

    <div id="myDiv">
        <p>Initial content inside the div.</p>
    </div>

    <button onclick="appendHTML()">Add More HTML</button>

    <script>
        // Function to append HTML content to the div
        function appendHTML() {
            // Get the div element by its id 'myDiv'
            const myDiv = document.getElementById("myDiv");
            
            // Append new HTML content after the current content
            myDiv.insertAdjacentHTML('beforeend', "<p>New paragraph added using insertAdjacentHTML.</p>");
        }
    </script>

</body>
</html>

Detailed explanation:

  1. <!DOCTYPE html>: Declares the document as an HTML document.
  2. <div id="myDiv">: Creates a div element with initial content.
  3. <button onclick="appendHTML()">: Button to call the appendHTML function when clicked.
  4. function appendHTML(): Defines a JavaScript function to append HTML to the div.
  5. const myDiv = document.getElementById("myDiv");: Selects the div element by its id.
  6. myDiv.insertAdjacentHTML('beforeend', "...");: Adds new HTML content to the div without replacing the existing content. Using 'beforeend' appends the content at the end of the element.

Tips:

  • insertAdjacentHTML is useful when you want to insert content at a specific position without replacing existing content like innerHTML does.
  • Other options for this method include 'beforebegin', 'afterbegin', 'beforeend', and 'afterend', allowing you to control exactly where the new HTML is inserted.

Related

Convert accented Unicode characters to non-accented in JavaScript

A guide on how to convert accented Unicode characters in the Vietnamese alphabet to non-accented letters using JavaScript's normalize method. This JavaScript code efficiently handles Vietnamese text processing.
How to convert Color Names to Hexcode using JavaScript

A guide on how to convert color names (e.g., "red", "blue") into Hex color codes (#RRGGBB) using JavaScript. This method helps manipulate colors efficiently in web development.
How to pass parameters to a setTimeout() method in JavaScript using arrow function

A guide on how to use `setTimeout()` with an arrow function to pass parameters to a function in JavaScript. This method is useful when you need to delay function execution while passing arguments to it.
Pass parameter to a setTimeout() method in JavaScript using a bind() method

A guide on how to pass a parameter to the `setTimeout()` method using the `bind()` method in JavaScript. This technique allows you to control the parameter passed to the delayed function call.
How to pass an array as a function parameter in JavaScript using the apply() method

A guide on using the `apply()` method in JavaScript to pass an array as a function parameter. This method allows you to convert an array into individual arguments when calling a function.
How to POST Data from an HTML Form to an API URL Using JavaScript

Learn how to send data from an HTML form to an API URL using JavaScript with the POST method. Includes detailed code and explanation on how to use Fetch API to handle form data and send POST requests.
Send JSON data via POST to an API using JavaScript

A guide on how to send JSON data to an API using the POST method in JavaScript. The code uses the fetch method to perform the POST request and includes detailed explanations of each step.
How to convert 3-digit color code to 6-digit color code using JavaScript

A guide on converting 3-digit color codes (#RGB) to 6-digit color codes (#RRGGBB) using JavaScript. This ensures consistent color representation in web pages.
How to pass an array as a function parameter in JavaScript using the call() method

A guide on how to pass an array as a function parameter in JavaScript using the `call()` method. The article explains how to utilize the `call()` method to change the context and manually pass parameters from an array.
Appending HTML to a div using innerHTML in JavaScript

This article guides how to append HTML code to a `div` element using the `innerHTML` property in JavaScript. Readers will learn how to work with the DOM to add new HTML content to a specific `div`.
main.add_cart_success
main.view_cart_and_checkout