如何用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，然後在裏面創建另一個元素？

回答

相關問題