How do you stop a Child Element from appending multiple times?
Question
Okay I know you have to use the removeChild() method, but how and where? So I'm trying to make a script that tells me the width and height of the window size so its easier to make media queries in CSS. Okay I know how to do this website by website basis, but I want to make this script where it can apply to ALL websites which is WHY I have to have the appendChild. Everything works the way I want it too, but it keeps appending if you see this in the firebug tool.
The only thing one needs to do to see the code in action is to add the onresize="getWinSize()"; to the body.
Also if there is a better way to write this let me know (: Please no jQuery.
<body onresize="getWinSize()";>
Here is the code.
function getWinSize () {
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
2 answers
solution1
1 2014-09-18 20:02:30
In the getWinSize() function you can always check for the element existence and then remove it if it already exists. Something like this:
function getWinSize () {
var element = document.getElementById("windowSizeOutput");
if(element)
element.parentNode.removeChild(element);
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
solution2
1 2014-09-18 20:07:36
You don't necessarily need to remove the element every time, you can just update its content
Either by checking if it is already in the document:
function getWinSize() { var display = document.getElementById("windowSizeOutput"); if (!display) { display = document.createElement('div'); display.id = "windowSizeOutput"; document.body.appendChild(display); var wd = window.innerWidth; var ht = window.innerHeight; display.style.background = "white"; display.style.height = "45px"; display.style.width = "100px"; display.style.border = "2px solid black"; display.style.position = "fixed"; display.style.left = "10px"; display.style.top = "200px"; } display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px"; }Or by saving the node out of the scope of the function
var display = null; function getWinSize() { if (!display) { display = document.createElement('div'); display.id = "windowSizeOutput"; document.body.appendChild(display); var wd = window.innerWidth; var ht = window.innerHeight; display.style.background = "white"; display.style.height = "45px"; display.style.width = "100px"; display.style.border = "2px solid black"; display.style.position = "fixed"; display.style.left = "10px"; display.style.top = "200px"; } display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px"; }
(And you can eventually put the initialization code in another function for clarity)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.