通過JavaScript創建HTML元素不起作用

Question

我目前是javascript的新手，剛剛開始學習如何使用javascript函數document.createElement（）創建新的DOM元素。 問題是我對所有這些功能感到非常困惑。代碼不足是我想要創建的

我對如何將這些元素附加到具有ID“日期”的元素上感到困惑。 這是我到目前為止所做的

 function createElements(){ //creating <div class="divider"></div> var div = document.createElement('div'); var attributeDivider= document.createAttribute('class'); attributeDivider.value="divider"; div.setAttributeNode(attributeDivider); //creating <div class="section"></div> var div2 = document.createElement('div'); var attributeSection = document.createAttribute('class'); attributeSection.value ="section"; div2.setAttributeNode(attributeSection); //creating h5 var h5 = document.createElement('h5'); var attributeH5 = document.createAttribute('id'); attributeH5.value ="test"; // creating stuff var stuff = document.createElement('Stuff'); // creating date var date = document.getElementById("date"); date.appendChild(h5); } 

 <!--This_is_where_I_need_to_append the created elements--> <p id="date">Date Created</p> <!--The elements that I need to create--> <div class="divider"></div> <div class="section"> <h5>Section 1</h5> <p>Stuff</p> </div> 

有人可以幫我嗎？

Answer 1

您正在創建元素，但是沒有將它們添加到HTML。

嘗試跟隨

 function createElements() { //creating <div class="divider"></div> var div = document.createElement('div'); var attributeDivider = document.createAttribute('class'); attributeDivider.value = "divider"; div.setAttributeNode(attributeDivider); //creating <div class="section"></div> var div2 = document.createElement('div'); var attributeSection = document.createAttribute('class'); attributeSection.value = "section"; div2.setAttributeNode(attributeSection); // Appending section div to divider div div.appendChild(div2); //creating h5 var h5 = document.createElement('h5'); // Adding content h5.textContent = "Section 1"; // Appending h5 to section div div2.appendChild(h5); // creating stuff var stuff = document.createElement('Stuff'); // Adding content stuff.textContent = "Stuff"; // Appending stuff element to section div div2.appendChild(stuff); // Getting date element var date = document.getElementById("date"); // Appending the structure created above date.appendChild(div); } createElements(); 

 <p id="date">Date Created</p>