JavaScript - insertAdjacentText() method

revision:

Category : element

The insertAdjacentText() method of the Element interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.

Syntax : 

        element.insertAdjacentText(where, data)
        node.insertAdjacentText(where, data)
        element.insertAdjacentText(position, text)
        node.insertAdjacentText(position, text)

Parameters:

where, position : required. a string representing the position relative to the element the method is called from; must be one of the following strings:

'beforebegin': before the element itself.
'afterbegin': just inside the element, before its first child.
'beforeend': just inside the element, after its last child.
'afterend': after the element itself.

data, text : a string from which to create a new text node to insert at the given position where relative to the element the method is called from.

Examples: 

            beforeBtn.addEventListener("click", () => {
                para.insertAdjacentText("afterbegin", textInput.value);
              });
            afterBtn.addEventListener("click", () => {
                para.insertAdjacentText("beforeend", textInput.value);
              });

Practical examples

example: insert text after a header element

Click "insert" to insert some text after the header:

My Header

code: 
                    <div>
                        <button onclick="insertFunction()">Insert</button>
                        <p>Click "insert" to insert some text after the header:</p>
                        <h4 id="myH4">My Header</h4>
                    </div>
                    <script>
                        function insertFunction() {
                            const h4 = document.getElementById("myH4");
                            let text = "My inserted text";
                            h4.insertAdjacentText("afterend", text);
                        }
                    </script>

example: using "afterbegin".

Click "insert" to insert some text inside the header:

My Header

code: 
                    <div>
                        <button onclick="insertFunction2()">Insert</button>
                        <p>Click "insert" to insert some text inside the header:</p>
                        <h4 id="myH42">My Header</h4>
                    </div>
                    <script>
                        function insertFunction2() {
                            const h4 = document.getElementById("myH42");
                            let text = "My inserted text";
                            h4.insertAdjacentText("afterbegin", text);
                        }
                    </script>

example: using "beforebegin".

Click "insert" to insert some text inside the header:

My Header

code: 
                    <div>
                        <button onclick="insertFunction3()">Insert</button>
                        <p>Click "insert" to insert some text inside the header:</p>
                        <h4 id="myH43">My Header</h4>
                    </div>
                    <script>
                        function insertFunction3() {
                            const h4 = document.getElementById("myH43");
                            let text = "My inserted text";
                            h4.insertAdjacentText("beforebegin", text);
                        }
                    </script>

example: using "beforeend".

Click "insert" to insert some text inside the header:

My Header

code: 
                    <div>
                        <button onclick="insertFunction4()">Insert</button>
                        <p>Click "insert" to insert some text inside the header:</p>
                        <h4 id="myH44">My Header</h4>
                    </div>
                    <script>
                        function insertFunction4() {
                            const h4 = document.getElementById("myH44");
                            let text = "My inserted text";
                            h4.insertAdjacentText("beforeend", text);
                        }
                    </script>