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()基本相同，除了我想在元素1中创建一个新元素而不是正文：

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

＆＃13;

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

＆＃13;

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

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

2 个答案: