Cara menggunakan insertadjacenthtml

View Discussion

Improve Article

Save Article

  • Read
  • Discuss
  • View Discussion

    Improve Article

    Save Article

    There are two ways to append HTML code to a div through JavaScript

    • Using the innerHTML attribute
    • Using the insertAdjacentHTML() method

    Using the innerHTML attribute:
    To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

    Syntax:

    element.innerHTML += "additional HTML code"
    

    or

    element.innerHTML = element.innerHTML + "additional HTML code"
    

    Example:

    <!DOCTYPE html>

    <html>

    <head>

        <title>How to Append HTML Code to a Div using Javascript</title>

        <style>

            body {

                text-align: center;

                padding: 5%;

            }

            h2{

                color:green;

            }

        </style>

    </head>

    <body>

        <div id="add_to_me">

            <h2>GeeksforGeeks</h2>

            <p>This is the text which has already been typed into the div</p>

        </div>

        <button onclick="addCode()">Add Stuff</button>

        <script>

            function addCode() {

                document.getElementById("add_to_me").innerHTML += 

                  "<h3>This is the text which has been inserted by JS</h3>";

            }

        </script>

    </body>

    </html>

      Output:
    • Before Clicking the Button:

      Cara menggunakan insertadjacenthtml

    • After Clicking the Button:

      • Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.

        Using the insertAdjacentHTML() method

        HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters:

        1. The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
        2. The HTML code you want to insert enclosed in quotes

        Syntax:

        elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');
        

        Example:

        <!DOCTYPE html>

        <html>

        <head>

            <title>How to Append HTML Code to a Div using Javascript</title>

            <style>

                body {

                    text-align: center;

                    padding: 5%;

                }

              h2{

                color: green

                  }

            </style>

        </head>

        <body>

            <div id="add_to_me">

                <h2>GeeksforGeeks</h2>

                <p id="add_after_me">

                  This is the text which has already been typed into the div</p>

            </div>

            <button onclick="addCode()">Add Stuff</button>

            <script>

                function addCode() {

                    document.getElementById("add_after_me").insertAdjacentHTML("afterend",

                        "<h3>This is the text which has been inserted by JS</h3>");

                }

            </script>

        </body>

        </html>

          Output:
        • Before Clicking the Button:

        • After Clicking the Button:

          • Note:You should never insert the HTML code in this way if you are taking it as an input from the user. It opens your website to cross-site scripting vulnerabilities.

            JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.


    How do you append in JavaScript?

    How it works:.

    First, select the ul element by its id by using the querySelector() method..

    Second, declare an array of languages..

    Third, for each language, create a new li element with the textContent is assigned to the language..

    Finally, append li elements to the ul element by using the append() method..

    What does it mean to append in JavaScript?

    JavaScript Append is one of useful method used to insert required content at position end of the specific selected elements. Append () method is useful to create content with the help of HTML, jQuery as well as DOM. One can insert content by specifying parameter at the end of given element in terms of matched elements.

    How do you add value to text area?

    To add text to a textarea, access the value property on the element and set it to its current value plus the text to be appended, e.g. textarea. value += 'Appended text' . The value property can be used to get and set the content of a textarea element.

    Can you append multiple elements in JavaScript?

    append() The append method allows you to append multiple elements or text nodes to a parent node. As you can see, you can supply an unlimited amount of arguments to the append() method and it will append everything to the parent.