Question

问题解决了：（http://jsfiddle.net/336e6pbh/15/）（解决方案）。

我有这个简单的js代码：jsfiddle（jsFiddle链接）。

Desktop();
GalleryButton();

function Desktop() {
    var wrapper = document.getElementById("wrapper");
    var footer = document.createElement("footer");
    var content = document.createElement("div");

    wrapper.appendChild(content);
    content.appendChild(footer);

    footer.id = "mainFooter";
    content.id = "content";
}

function GalleryButton() {
    var galleryImg = document.createElement("img");
    var galleryButton = document.createElement("a");
    galleryButton.setAttribute("href", "#");
    galleryImg.setAttribute("src", "pics/gallery.png");

    var bottom = document.getElementById("mainFooter");
    galleryButton.appendChild(galleryImg);
    bottom.appendChild(galleryButton);

    galleryButton.onclick = function () {
        new NewBox();
    };
}

function NewWindow() {
    var popup = document.createElement("div");
    var content = document.getElementById("content");

    popup.id = "popup";
    content.appendChild(popup);
}

function NewBox() {
    new NewWindow();
    var box = document.createElement("div");
    var content = document.getElementById("popup");

    box.id = "box";
    popup.appendChild(box);
}

当我点击左下角的img时，一个新的弹出窗口显示内部有一个黄色框。我的问题是如何在新弹出窗口中获得带有新黄色框的新弹出窗口？

我可以将NewWindow的代码放到NewBox函数中，但我希望这些函数分开。

Answer 1

你对document.getElementById（“popup”）的第二次调用;找到id = popup的第一个div并将黄色框放在那里。

您的元素ID应该是唯一的：HTML SPEC

Answer 2

检查这个jsfiddle，我已经更改了你的代码和你的CSS

http://jsfiddle.net/336e6pbh/5/

function GalleryButton() {
var galleryImg = document.createElement("img");
var galleryButton = document.createElement("a");
galleryButton.setAttribute("href", "#");
galleryImg.setAttribute("src", "pics/gallery.png");

var bottom = document.getElementById("mainFooter");
galleryButton.appendChild(galleryImg);
bottom.appendChild(galleryButton);

galleryButton.onclick = function () {
    new newPopUp();
};
}

function newPopUp(){
var content = document.getElementById("content");
var popup = document.createElement("div");
popup.className = "popup";
var blueBox = document.createElement("div");
blueBox.className = "blueBox";

popup.appendChild(blueBox);

content.appendChild(popup);    
 }

你的CSS就像这样

#content {
background-color: #ccc;
height:300px;
width:350px;
}
#mainFooter {
border:1px solid #000;
height:50px;
background-color: rgba(0, 0, 0, 0.4);
}
.popup {
background-color: blue;
border:1px solid pink;
height:100px;
width:150px;
}
.blueBox {
background-color: yellow;
height:20px;
width:40px;
}

您的HTML代码将保持原样....

另一个新功能的新功能

2 个答案: