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)

document.createElement(tagName);

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

Syntax (“appendChild()” Method)

element.appendChild(childnode)

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

HTML Code

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>
</div>

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:

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>”.

Output

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:

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.

Output

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

Conclusion

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.

How to Add p Tags to a div Using JavaScript