如何阻止子元素多次追加？

Question

Okay I know you have to use the removeChild() method, but how and where? 好的，我知道您必须使用removeChild（）方法，但是如何以及在哪里使用？ 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. 因此，我正在尝试编写一个脚本，该脚本告诉我窗口大小的宽度和高度，以便更轻松地在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. 好的，我知道如何按网站来创建此网站，但是我想制作此脚本，使其可以应用于所有网站，这就是为什么我必须拥有appendChild的原因。 Everything works the way I want it too, but it keeps appending if you see this in the firebug tool. 一切都按照我想要的方式工作，但是如果您在firebug工具中看到此内容，它就会继续追加。

The only thing one needs to do to see the code in action is to add the onresize="getWinSize()"; 要查看运行中的代码，唯一要做的就是添加onresize =“ getWinSize（）”; to the body. 到身体。

Also if there is a better way to write this let me know (: Please no jQuery. 另外，如果有更好的编写方法，请告诉我（：请不要使用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";
}

Answer 1

In the getWinSize() function you can always check for the element existence and then remove it if it already exists. 在getWinSize（）函数中，您始终可以检查元素是否存在，如果元素已经存在，则将其删除。 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";
}

Answer 2

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) （为了清晰起见，您最终可以将初始化代码放在另一个函数中）

如何阻止子元素多次追加？

问题描述

2 个解决方案

解决方案1
1 2014-09-18 20:02:30

解决方案2
1 2014-09-18 20:07:36

如何阻止子元素多次追加？

问题描述

2 个解决方案

解决方案1 1 2014-09-18 20:02:30

解决方案2 1 2014-09-18 20:07:36

解决方案1
1 2014-09-18 20:02:30

解决方案2
1 2014-09-18 20:07:36