How to Add p Tags to a div Using JavaScript

HTML (Hyper Text Markup Language) is not the only way for creating the elements. It is such that the elements can be created and added to the source code using JavaScript. JavaScript is a lightweight dynamic programming language that can create and append the already created element with the desired one. It uses built-in methods for creating the specific HTML element and then adding it to the created element as per the requirement.

This guide elaborates on all the possible approaches to add “<p>” tags to a “<div>” using JavaScript.

How to Add “<p>” Tags to a “<div>” Using JavaScript?

HTML DOM (Document Object Model) offers the “createElement()” method to create an HTML element and the “appendChild()” method to add/append it to the corresponding element in an HTML document.

Syntax (“createElement()” Method)


In the above syntax, “tagName” represents the tag name of the HTML element that needs to be created.

Syntax (“appendChild()” Method)


This syntax supports only one parameter “childnode” which is the node that needs to be appended to the corresponding HTML element.


First, have a look at the stated HTML code:

<h2>Add "p" tag to a "div" Using JavaScript</h2>
<p>This div is appended with a new "p" tag</p>
<div id="Div1">
<p id="para1">This is a paragraph.</p>

As the above lines of code:

  • Define a first subheading using the “<h2>
  • Next, create a paragraph via the “<p>” tag for defining the stated statement.
  • After that, add a div using the “<div>” tag having an assigned id “Div1”. In its body, a paragraph is created having an id “para1”.

Note: The above HTML code will be followed in all examples of this write-up.

Example 1: Applying the “createElement()” and “appendChild()” Methods to Add the “<p>” Tag as Last Child to a “<div>”

In this example, the “<p>” tag (child node) is created and then added to the existing HTML element “<div>”(parent node).

JavaScript Code

Let’s overview the following code:

const elem = document.createElement("p");
const node = document.createTextNode("This is another added paragraph.");
const element = document.getElementById("Div1");

In the above code snippet:

  • Firstly, the variable “elem” utilizes the “createElement()” method to create the “<p>” tag/element.
  • Next, a text node is created using the “createTextNode()” method to add some text to the created “<p>” element.
  • After that, append the text node to the created “<p>” element with the help of the “appendChild()” method.
  • Once the element “<p>” is created, access the existing HTML element “<div>” via its id “Div1” using the “document.getElementById()” method.
  • Lastly, append the newly created HTML element “<p>” to the existing “<div>” as a child by utilizing the “appendChild()” method.
  • As a result, this method adds the “<p>” element as a last child to a “<div>”.


As analyzed, the created “<p>” tag/element is appended as a last child to the existing “<div>”.

Example 2: Applying the “createElement()” and “insertBefore()” Methods to Add the “<p>” Tag as a First Child of the “<div>”

This example utilizes the “insertBefore()” method that adds the created child node before the parent node:

const elem = document.createElement("p");
const node = document.createTextNode("This is another added paragraph");
const element = document.getElementById("Div1");
const child = document.getElementById("para1");
element.insertBefore(elem, child);

The above code block utilizes the “insertBefore()” method to add the newly created “<p>” tag/element comprising the text node before the parent node “<div>” instead.


Here, it can be observed that the newly created “<p>” tag is added above the existing “<div>”. 


The HTML Document Object Model provides the “createElement()” method for first creating the desired HTML element(<p>) and then adding it to the existing element(<div>) via the “appendChild()” method. Also, the user can add the “<p>” tag to append the child node before the parent node(div) using the “insertBefore()” method. This guide described all the possible ways to add the “<p>” tag to a “<div>” using JavaScript.

About the author

Talha Saif Malik

Talha is a contributor at Linux Hint with a vision to bring value and do useful things for the world. He loves to read, write and speak about Linux, Data, Computers and Technology.