如何用JavaScript创建一个元素，给它一个ID，然后在里面创建另一个元素？

我使用document.createElement()使用JavaScript创建了一个新元素，并使用document.body.appendChild()将其添加到了主体中。我想在此元素内部的此元素内部创建另一个元素。我知道它可以这样做：如何用JavaScript创建一个元素，给它一个ID，然后在里面创建另一个元素？

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文档。

我在做什么错？

来源

2015-07-03 eddmcmxciii

它是好的，问题是到第二个元素赋予背景色 - 您分配了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();

来源

2015-07-03 05:51:16

这么简单的错误，我怎么错过了？大声笑 – eddmcmxciii

@eddmcmxciii你的浏览器的DOM检查员会告诉你第二个元素实际上正在被正确追加 – Phil

我甚至没有想到这一点，谢谢你的提示。我试过接受这个答案，但显然我必须等6分钟。 – eddmcmxciii

我会倾向于返回创建的元素并将父元素传递给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());

来源

2015-07-03 05:55:33 Phil

如何用JavaScript创建一个元素，给它一个ID，然后在里面创建另一个元素？

回答

相关问题