如何使用JavaScript创建一个元素，给它一个ID，然后在其中创建另一个元素？

我已经用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);

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();

但是，如果我不想立即将第二个元素附加到第一个元素，该怎么办？如果我想在某个事件之后删除该元素，该怎么办？这两个元素不都需要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);
};

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

此功能工作正常，浏览器中会绘制一个红色的600x400px。
现在使用
createSecondElement（）
，我想在这个元素中添加另一个元素

createElementTwo（）
与
createElementTwo（）
基本相同，只是我想在元素一的内部而不是主体中创建一个新元素：

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

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

这不行

总之，我的代码如下所示：

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

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文档中已经存在的元素添加元素

我做错了什么？
很好，问题在于为第二个元素指定背景色-您已将
backgroundColor
指定给dom元素，而不是指定给它的
样式


函数init（）{
var body=document.body；
函数createFirstElement（）{
var firstElement=document.createElement（'div'）；
firstElement.id='firstElement'；
firstElement.style.width='600px'；
firstElement.style.height='400px'；
firstElement.style.backgroundColor='red'；
body.appendChild（第一个元素）；
};
函数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'；//此处缺少样式
第一个元素。追加子元素（元素二）；
};
createFirstElement（）；
createElementTwo（）；
};
init（）
我倾向于返回创建的元素，并将父元素传递到
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());

@EDDMCxIII浏览器的DOM检查器会向您显示第二个元素实际上被正确附加。我甚至没有想到这一点，谢谢您的提示。我试着接受这个答案，但显然我得等6分钟。