如何用JavaScript創建一個元素，給它一個ID，然后在其中創建另一個元素？

Question

我一直在使用創造了一個新的元素與JavaScript的document.createElement()我已經用它附加到身體document.body.appendChild() 我想在此元素內的此元素內的此元素內創建另一個元素。 我知道可以這樣做：

var firstElement = document.body.createElement('div');
var secondElement = document.body.cteateElement('div');
firstElement.appendChild(secondElement);
document.body.appendChild(firstElement);

但是，如果我不想立即將第二個元素追加到第一個元素，該怎么辦？ 如果我想在某個事件之后稍后刪除該元素怎么辦？ 兩個元素都不需要ID嗎？

我創建了兩個函數，一個函數創建第一個元素，一個函數創建第二個元素。 然后，我將它們都稱為：

function createFirstElement() {

};
function createSecondElement() {

};
createFirstElement();
createSecondElement();

在函數createFirstElement()內部，很明顯，我已經創建了第一個元素！ 我還設置了樣式，為其指定了ID並將其附加到正文中：

function createFirstElement() {
    var firstElement = document.createElement('div');
    firstElement.id = 'firstElement';
    firstElement.style.width = '600px';
    firstElement.style.height = '400px';
    firstElement.style.backgroundColor = 'red';
    document.body.appendChild(firstElement);
};

此功能運行良好，在瀏覽器中繪制了一個紅色的<div> 600x400px。 現在使用createSecondElement() ，我想在此元素內添加另一個元素。

createElementTwo()是基本相同createElementTwo()但我想一個元素，而不是身體的內部創建一個新元素：

function createElementTwo() {
    var firstElement = document.getElementById('firstElement');
    var elementTwo = document.createElement('div');
    elementTwo.id = 'elementTwo';
    elementTwo.style.width = '300px';
    elementTwo.style.height = '200px';
    elementTwo.backgroundColor = 'blue';
    firstElement.appendChild(elementTwo);
};

這行不通！

總的來說，我的代碼如下所示：

function init() {
    var body = document.body;

    function createFirstElement() {
        var firstElement = document.createElement('div');
        firstElement.id = 'firstElement';
        firstElement.style.width = '600px';
        firstElement.style.height = '400px';
        firstElement.style.backgroundColor = 'red';
        body.appendChild(firstElement);
    };
    function createElementTwo() {
        var firstElement = document.getElementById('firstElement');
        var elementTwo = document.createElement('div');
        elementTwo.id = 'elementTwo';
        elementTwo.style.width = '300px';
        elementTwo.style.height = '200px';
        elementTwo.backgroundColor = 'blue';
        firstElement.appendChild(elementTwo);
    };

    createFirstElement();
    createElementTwo();
};
init();

我已經在網上搜索了很多，但是我所能找到的就是如何創建一個新元素，或者向HTML文檔中已經存在的元素添加元素。

我究竟做錯了什么？

Answer 1

很好，問題在於將背景色分配給第二個元素-您已將backgroundColor分配給dom元素，而不是分配給它的style

 function init() { var body = document.body; function createFirstElement() { var firstElement = document.createElement('div'); firstElement.id = 'firstElement'; firstElement.style.width = '600px'; firstElement.style.height = '400px'; firstElement.style.backgroundColor = 'red'; body.appendChild(firstElement); }; function createElementTwo() { var firstElement = document.getElementById('firstElement'); var elementTwo = document.createElement('div'); elementTwo.id = 'elementTwo'; elementTwo.style.width = '300px'; elementTwo.style.height = '200px'; elementTwo.style.backgroundColor = 'blue'; //here style was missed firstElement.appendChild(elementTwo); }; createFirstElement(); createElementTwo(); }; init(); 

Answer 2

我傾向於返回創建的元素並將父元素傳遞給createElementTwo因此您不必擔心通過id查找它。 例如...

function createFirstElement() {
    // snip

    document.body.appendChild(firstElement);
    return firstElement;
}

function createElementTwo(firstElement) {
    var elementTwo = document.createElement('div');
    elementTwo.id = 'elementTwo';
    elementTwo.style.width = '300px';
    elementTwo.style.height = '200px';
    elementTwo.style.backgroundColor = 'blue'; // courtesy of Mr Johny
    firstElement.appendChild(elementTwo);
    return elementTwo;
}

createElementTwo(createFirstElement());