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

Question

我使用 document.createElement() 通过 JavaScript 创建了一个新元素我使用 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();