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

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>

CodePudding user response：

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);
}

CodePudding user response：

You can wrap your p inside a div and add a display: flex configuration.

const paraDiv = document.createElement("div");
// Add your style configuration to your paraDiv
function newtask(){
    let ask = prompt("Enter the description of task");
    const para = document.createElement("p");
    paraDiv.appendChild(para)
    const Textnode = document.createTextNode(ask);
    para.appendChild(Textnode);
    let text= document.getElementById("new")
    text.appendChild(Textnode);
}