JavaScript Insert HTML After Element
Last Updated : Mar 11, 2024
IN - JavaScript HTML | Written & Updated By - Riya
In this tutorial we will show you the solution of JavaScript insert html after element, here we needs to use external open source jquery support library script file for use insertAfter method.
The insertAfter() method is an inbuilt method in jquery which is used to insert some HTML content after a specified element. The HTML content will be inserted after each occurance of the specified element.
Step By Step Guide On JavaScript Insert HTML After Element :-
Here we defined h1 tag for instruct user about like how to handle the processes and a button ‘Click’ defined for proceed the process.
In script we specified ready() method it will starts process when loads program on browser then the click event waiting for user responses when click event occurs by user.
Within that we adding some content after h1 element using insertAfter() method.
<!DOCTYPE html>
<html>
<head>
<title>INSERT AFTER ELEMENT</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Click button text will insert after element.</h1>
<button>Click</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("<span>New message</span>").insertAfter("h1");
});
});
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined h1 element with message ‘Click button text will insert after element.’ And a button ‘Click’.
- In script ready() method defines it will ready for execution whenever loads on browser which is accessed by document object services then within that we wait for button ‘click’ response received by user when clicks on it which is found by ‘button’ tag name.
- We inserting content ‘New message’ with the help of <span> tag and insertAfter() method will holds ‘h1’ element which means that content appended after h1 element on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to insert some content after specified html element using javascript.
When we executes program on browser we can see program heading and button ‘Click’ user needs to clicks on button then with the help insertAfter() method.
By using this concept we can also specify any other elements what we defined in our program and then we can also add that content on specified same html element how many times we defined in program.
I hope this tutorial on JavaScript insert html after element helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
