Home How to add break tags after inserting a paragraph into html using javascript's createElement

Questions

How to add break tags after inserting a paragraph into html using javascript's createElement

August 9, 2022

I’ve successfully inserted a paragraph element into html page using javascript but the 2nd consecutive paragraph comes side by side and I wish to add a break tag to print them in another line, how do I do that?
Here is a screenshot of my output:

Here is my javascript code:

function newtask(){
let ask = prompt("Enter the description of task");
const para = document.createElement("p");
const Textnode = document.createTextNode(ask);
para.appendChild(Textnode);
let text= document.getElementById("new")
text.appendChild(Textnode);

}

Here is the relevant html

<script src="index.js"></script>
<h1>To do List</h1> 
<button onclick="newtask()">New Task</button>

<div id="new">
   <p>test</p>
</div>

>Solution :

You were appending Textnode to your parent element, not your new <p> element. Here’s a quick rewrite that should give you your desired results.

Firstly, create the new <p> element, then modify its innerText property. After that, just append your new <p>.

function newtask() {
  const text = document.getElementById("new");
  const ask = prompt("Enter the description of task");
  const para = document.createElement("p");
  para.innerText = ask;
  text.appendChild(para);
}