How to check a element is appended or not in JavaScript

Question

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

`const parent = document.getElementById("containPara"); if (!parent.querySelector(".myPara")) { /* ...it's not there, create and append it...*/}` — T.J. Crowder, Sep 25 '21 at 12:34
[MDN's DOM reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) is really good. You can see, for instance, that the [`Element` interface](https://developer.mozilla.org/en-US/docs/Web/API/Element) has [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), which lets you look for elements within the original element using any CSS selector. — T.J. Crowder, Sep 25 '21 at 12:35
Thanks @T.J.Crowder a lot, can you tell about how to stop appending if it exists — Rana, Sep 25 '21 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, Sep 25 '21 at 12:37
Can you check your function name ? You call `CheckPara()` button onclick but function name is `checkPara()`. — Yahya Altintop, Sep 25 '21 at 12:53
@connexo - What reference? You mean keeping it after the function returns? That's certain **an** approach. I wouldn't call it necessarily a better one. — T.J. Crowder, Sep 25 '21 at 13:26

score 2 · Answer 1 · answered Sep 25 '21 at 13:08

2

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>

answered Sep 25 '21 at 13:08

Yahya Altintop

204
2
12

what is `{once:true}` work here – Rana Sep 25 '21 at 13:18
Runs the function only once – Yahya Altintop Sep 25 '21 at 13:26
what are the meaning of `true` and `false` use in place of `{once:true}` – Rana Sep 25 '21 at 13:39
If you set `{once:true}` the function runs only once. But you set `false` the function runs everytime (when you call it). – Yahya Altintop Sep 25 '21 at 13:42
Do you have a link where I can read about this : `true` `false` `{once:true}` – Rana Sep 25 '21 at 13:45
[Medium Doc](https://medium.com/beginners-guide-to-mobile-web-development/one-off-event-listeners-in-javascript-92e19c4c0336) – Yahya Altintop Sep 25 '21 at 13:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237485/discussion-between-yahya-altintop-and-rana). – Yahya Altintop Sep 25 '21 at 14:11

connexo · Accepted Answer · 2021-09-25T12:43:33.613

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.

@CherryDT Done. Feel free to edit if you still think it needs further explanation. — connexo, Sep 25 '21 at 12:43
Thanks a lot @connexo , it there a method to stop appending too . Here , appending is done if there is not `para` or there is no such method or stopping — Rana, Sep 25 '21 at 12:50

How to check a element is appended or not in JavaScript

2 Answers2