通过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>