Javascript Insert Before and After HTML Element or Node with Snippet

Javascript provides method insertBefore() which we can use to insert html elements to DOM. This is quite effective and best ways when it comes to appending element. This method is called on element and parameters such as element which is to be appended and a reference element must be passed as parameter. Its syntax is given below.

Syntax

element.insertBefore(new_element, reference_element_or_node);

Table of Contents

Simple example of Inserting Before element

<div id="my_div">
    <p>My Paragraph</p>
</div>

<script>
    let div_element = document.getElementById('my_div');
    let new_element = document.createElement('P');
    new_element.innerText = "New Element 1";
    div_element.appendChild(new_element);
</script>
Javascript append HTML element using appendChild() method
Javascript append HTML element using appendChild() method

In above example we have used appendChild() method to append after the element. But this will not be helpful in
complex situations which is shown in below example.

Example of Appending elements Before and After

<label for="">Select Node</label>
<select id="select_node">
    <option value="">Choose to insert near which Node</option>
</select>
<br>
<br>

<label for="">Type anything...</label>
<input type="text" id="input_text" value="">

<br><br>
<button type="button" onclick="append_to_node(this, 'APPEND_BEFORE')" >Append Before</button>
<button type="button" onclick="append_to_node(this, 'APPEND_AFTER')" >Append After</button>


<ul id="my_list">


</ul>

<script>

    let select_node_element = document.getElementById('select_node');
    let input_text_element = document.getElementById('input_text');
    let my_list_element = document.getElementById('my_list');

    function append_to_node(element, append_type="APPEND_BEFORE"){
        let new_element = document.createElement('LI');
        new_element.innerText = input_text_element.value;

        let selected_node = (select_node_element.selectedOptions[0].value!="" && !isNaN(select_node_element.selectedOptions[0].value))? parseInt(select_node_element.selectedOptions[0].value) : 0;
        

        if(append_type=="APPEND_BEFORE"){
            my_list_element.insertBefore(new_element, my_list_element.children[selected_node]);
        }

        if(append_type=="APPEND_AFTER"){
            selected_node+=1;
            my_list_element.insertBefore(new_element, my_list_element.children[selected_node]);
        }

        populate_select_node();
    }


    function populate_select_node(){
        let childrens = my_list_element.children;
        let content = `<option value="">Choose to insert near which Node</option>`;
        for(let i in childrens){
            if(childrens[i].ELEMENT_NODE){
                content += `<option value="${i}">${childrens[i].innerText}</option>`;
            }                
        }
        select_node_element.innerHTML = content;
    }
</script>

In above example we have form fields and list which displays data entered by user.The button Append Before inserts new element with user entered data inside ul#my_list after the selected element in select_node and Append After inserts new element after the selected node.

Conclusion

So its time to say bye we have come to end of our post on Javascript Insert Before and After HTML Elements with Snippet for Beginners. If you have your best way of appending before and after element than do suggest us in comment section below and if you like our content then please do share it.

Related Posts