insertAdjacentHTML, insertAdjacentElement and insertAdjacentText

insertAdjacentHTML

The insertAdjacentHTML method inserts a string of text as HTML into a specified position relative to the element. The following code shows how to use the insertAdjacentHTML method:

let a = document.getElementById('first');
a.insertAdjacentHTML('beforebegin', '<div classs="test">beforebegin</div>');

The first parameter is the position where the HTML string will be inserted. The following are the possible values:

beforebegin: Before the element itself.
beforeend: Just inside the element, after its last child.
afterbegin: Just inside the element, before its first child.
afterend: After the element itself.

here is the result of the above code:

<html>
<head>
    <title>Lesson 44</title>
</head>
<body>
    <div classs="test">beforebegin</div>
    <div id="first">
        I am first element
    </div>
    <script src="script.js"></script>
</body>
</html>

if we want to see the result of all the positions, we can use the following code:

let a = document.getElementById('first');
a.insertAdjacentHTML('beforebegin', '<div classs="test">beforebegin</div>');
a.insertAdjacentHTML('afterbegin', '<div classs="test">afterbegin</div>');
a.insertAdjacentHTML('beforeend', '<div classs="test">beforeend</div>');
a.insertAdjacentHTML('afterend', '<div classs="test">afterend</div>');

and here is the result:

<html>
<head>
    <title>Lesson 44</title>
</head>
<body>
    <div classs="test">beforebegin</div>
    <div id="first">
        <div classs="test">afterbegin</div>
        I am first element
        <div classs="test">beforeend</div>
    </div>
    <div classs="test">afterend</div>
    <script src="script.js"></script>
</body>
</html>

try it out and see in your browser.

Node removal

The remove method removes the element from the DOM. The following code shows how to use the remove method:

let a = document.getElementById('first');
a.remove();

here is the result:

<html>
<head>
    <title>Lesson 44</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

If you open inspect element and reload the page, you will see that first div appeas for a second and then suddenly disappears as the js is executed.

Day 42 of #100daysofjs

insertAdjacentHTML, insertAdjacentElement and insertAdjacentText

insertAdjacentHTML

Node removal

Subscribe to my newsletter

Arpan Mukherjee

Arpan Mukherjee