I have a JavaScript function which append an p tag with class myPara .

I want to check if till now element is appended or not :

• if appended then stop next appending
• if not appended then append the p tag

I have tried some SO questions all are about jQuery, can tell in JavaScript

How to check for the existence of an element after append?

How can I check if append element already exists? [duplicate]

function appendPara() {
  let para = document.createElement("p");
  para.className = "myPara";
  var textnode = document.createTextNode("Dummy is my brother");
  para.appendChild(textnode);
  document.getElementById("containPara").appendChild(para);
}

function checkPara() {
  //if (more than 1 length of class ="dummyPara" present)
    //appendPara() will not append next element
//} else {
  //appending will take place by appendPara()
//}
}

<div id="containPara">
  <p class="dummyPara">I am dummy plz don't remove me. You get a chance on next appendings but leave the 1st on he is my brother from another mother</p>
</div>
<button onclick="appendPara()">Append p</button>
<button onclick="checkPara()">Check appending</button>

I have a JavaScript function which append an p tag with class myPara .

I want to check if till now element is appended or not :

• if appended then stop next appending
• if not appended then append the p tag

I have tried some SO questions all are about jQuery, can tell in JavaScript

How to check for the existence of an element after append?

How can I check if append element already exists? [duplicate]

function appendPara() {
  let para = document.createElement("p");
  para.className = "myPara";
  var textnode = document.createTextNode("Dummy is my brother");
  para.appendChild(textnode);
  document.getElementById("containPara").appendChild(para);
}

function checkPara() {
  //if (more than 1 length of class ="dummyPara" present)
    //appendPara() will not append next element
//} else {
  //appending will take place by appendPara()
//}
}

<div id="containPara">
  <p class="dummyPara">I am dummy plz don't remove me. You get a chance on next appendings but leave the 1st on he is my brother from another mother</p>
</div>
<button onclick="appendPara()">Append p</button>
<button onclick="checkPara()">Check appending</button>

Thanks a lot in advance

• javascript
• html

• 1 const parent = document.getElementById("containPara"); if (!parent.querySelector(".myPara")) { /* ...it's not there, create and append it...*/} – T.J. Crowder Commented Sep 25, 2021 at 12:34
• 1 MDN's DOM reference is really good. You can see, for instance, that the Element interface has querySelector, which lets you look for elements within the original element using any CSS selector. – T.J. Crowder Commented Sep 25, 2021 at 12:35
• Thanks @T.J.Crowder a lot, can you tell about how to stop appending if it exists – Yupma Commented Sep 25, 2021 at 12:36
• @T.J.Crowder That is a really sub-par solution suggested in that referenced duplicate, with regard to this question. Re-opened. Since OP already has a reference to the element, they should use that. – connexo Commented Sep 25, 2021 at 12:37
• Can you check your function name ? You call CheckPara() button onclick but function name is checkPara(). – Yahya Altintop Commented Sep 25, 2021 at 12:53

3 Answers 3

You don't need checkPara, at all. Just create para outside appendPara, which allow checking inside your function that adds it.

const para = document.createElement("p");
para.className = "myPara";
const textnode = document.createTextNode("Dummy is my brother");
para.appendChild(textnode);
const containPara = document.getElementById("containPara");

function appendPara() {
  if (![...containPara.children].includes(para))
    containPara.appendChild(para);
}

<div id="containPara">
  <p class="dummyPara">I am dummy plz don't remove me. You get a chance on next appendings but leave the 1st on he is my brother from another mother</p>
</div>
<button onclick="appendPara()">Append p</button>

[...containPara.children]

spreads the element childnodes into an array, which allows using array methods like includes on it.

Is this useful for you ?

document.getElementById("appendP").addEventListener("click",function(){

  let para = document.createElement("p");
  para.className = "myPara";
  var textnode = document.createTextNode("Dummy is my brother");
  para.appendChild(textnode);
  document.getElementById("containPara").appendChild(para);
    
},{once:true})

    <div id="containPara">
  <p class="dummyPara">I am dummy plz don't remove me. You get a chance on next appendings but leave the 1st on he is my brother from another mother</p>
</div>
<button id="appendP">Append p</button>

Array.from(parent.children).includes(child)

Array.from is a slightly more performant alternative to connexo's answer:

const p = document.createElement('p')
p.textContent = "foo"

function append() {
  if (!Array.from(document.body.children).includes(p)) {
    document.body.appendChild(p)
  } else {
    alert('already appended')
  }
}

<button onclick="append()">Append</button>