Check if Paragraph Exists Then Insert Element Using JavaScript

Check if Paragraph Exists Then Insert Element Using JavaScript

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

Here is an HTML script example to check if paragraph exists then insert an element using JavaScript.

Insert an Element If a Paragraph Exists Using JavaScript

In the following example, it will check that if the third paragraph exists then it will insert another paragraph using JavaScript.

<!DOCTYPE html>
<head>
<title>Recipe</title>
<script>

window.onload=function() {

var div = document.getElementById("target");

var paras = div.getElementsByTagName("p");

var newPara = document.createElement("p");
if (paras[3]) { 
div.insertBefore(newPara, paras[3]);
} else {
div.appendChild(newPara);
}

newPara.innerHTML="This is the new paragraph inserted after 3rd paragraph";
} 
</script>

</head>
<body>
<div id="target">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
<p>This is the fourth paragraph</p>
</div>
</body>

Output

This is the first paragraph

This is the second paragraph

This is the third paragraph

This is the new paragraph inserted after 3rd paragraph

This is the fourth paragraph