New element isn’t recognize

Question

Someone can help me? Why this code make an error?
var dom=document;
var domyP = dom.createElement("p")
var textP = dom.createTextNode("hellooo")
setInterval(function(){
if(myP){
alert("exist")
}else{
alert("not exist");
domyP;
var myP = dom.querySelector("p");
myP.appendChild(textP)}
}, 1000)
myP is null why? I created it before...
Sorry for my eng.

Answer 1

Hey :)
So first of all you must load your Code after the DOM is fully loaded, cuz you create new Elements and in Sololearn it loads in the head section of your document. A common way is to add a window onload function so like that:
window.onload = function() {
// your code ...
}
This avoids any issues in the startloading.
But why myP is null? Its type null because you dont define where the "domyP" element is going to be in your document. So you must add it to the body the same way you want to add taxtP as a Child of myP. Another thing is that you must add textP to the parent domyP. So heres the changed code:
window.onload = function() {
// prepare the main setup
var dom = document
var domyP = dom.createElement("p")
var textP = dom.createTextNode("helloooo")
// add a id to the created element to recognize it in the future
domyP.setAttribute("id", "exists")
// add the created node to the created paragraph tag
domyP.appendChild(textP)
setInterval(function() {
if(dom.getElementById("exists")) { // element was actually "created" = added
alert("exist")
}
else {
alert("not exist")
// add the paragraph tag to the DOM
dom.body.appendChild(domyP)
}
}, 1000)
}
Thats it! I dont know if I interpreted your code right - so i dont actually know what you want with it but if Im wrong make sure to ask me. I will help you! :)

Answer 2

Ive interpreted your code like that: you want to check if the element is already added to the DOM so if not it will return a alert with "not exist" and add it to the body. after 1 sec it will recheck it and then ot will see that its added so it will print "exists". Tge interval was set for recheck, so if you dont change anything to the document it will loop infinitely "exist".
So I dont know if you want that. Basically you can add a break keyword to the if so it will stop the interval if its exists. So hopefully you see what the setInterval function is used for. You could also remove it and than it will automatically add it to the document, but then you dont have a callback to check if it exists.

Answer 3

uhm ok.Yes the window load it was obviously, but isn’t necessary in SL (i think). your explanation it’s clear. So i must create during load dom, the element that i callback in my function, then only in func. i’ll append the final element, (paragraph in this case) at the dom body... :) it’s logical but for newbie like me is necessary to clarify the mechanism... Another question... so the setinterval function isn’t really necessary at this point ... or not?