CODEWITHSUNDEEP
javascript
dragonore
dragonore

Reputation: 803

How do you stop a Child Element from appending multiple times?

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";
}

Upvotes: 0

Views: 1071

Answers (2)

Volune
Volune

Reputation: 4339

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)

Upvotes: 1

V31
V31

Reputation: 7666

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";
}

Upvotes: 1

Related Questions