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

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

javascript

Javascript 如何阻止子元素多次追加？,javascript,Javascript,好的，我知道您必须使用removeChild（）方法，但是如何使用以及在哪里使用呢？因此，我试图制作一个脚本，告诉我窗口大小的宽度和高度，以便更容易在CSS中进行媒体查询。好吧，我知道如何做这个网站的网站的基础上，但我想使这个脚本，它可以适用于所有的网站，这就是为什么我有一个孩子。一切都按照我想要的方式运行，但是如果你在firebug工具中看到这一点，它会不断追加要查看代码的运行，只需添加onresize=“getWinSize（）”；给身体另外，如果有更好的方法写这篇文章，请让我知道（：请

好的，我知道您必须使用removeChild（）方法，但是如何使用以及在哪里使用呢？因此，我试图制作一个脚本，告诉我窗口大小的宽度和高度，以便更容易在CSS中进行媒体查询。好吧，我知道如何做这个网站的网站的基础上，但我想使这个脚本，它可以适用于所有的网站，这就是为什么我有一个孩子。一切都按照我想要的方式运行，但是如果你在firebug工具中看到这一点，它会不断追加

要查看代码的运行，只需添加onresize=“getWinSize（）”；给身体

另外，如果有更好的方法写这篇文章，请让我知道（：请不要jQuery

  <body onresize="getWinSize()";>

在getWinSize（）函数中，您可以始终检查元素是否存在，如果元素已经存在，则将其删除。类似于：

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

您不必每次都删除该元素，只需更新其内容即可

通过检查文档中是否已存在：

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

或者将节点保存到函数范围之外

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

（为了清楚起见，您最终可以将初始化代码放在另一个函数中）

始终是这样：）如果您喜欢答案，请将其标记为upvote/accept或两者兼而有之：）

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