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
– T.J. Crowder, Commented Sep 25, 2021 at 12:34
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
– 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
– 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
– 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
– Yahya Altintop, Commented Sep 25, 2021 at 12:53

connexo · Accepted Answer · 2021-09-25 12:43:33Z

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

Yahya Altintop · Accepted Answer · 2021-09-25 13:08:07Z

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>

what are the meaning of true and false use in place of {once:true}
If you set {once:true} the function runs only once. But you set false the function runs everytime (when you call it).
Do you have a link where I can read about this : true false {once:true}

Fractal · Accepted Answer · 2024-05-26 19:04:59Z

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>

Collectives™ on Stack Overflow

How to check a element is appended or not in JavaScript

3 Answers 3

2 Comments

7 Comments

Comments

Linked

Hot Network Questions